When is it allowed to style pseudo elements on an option element? - html

Question

I am trying to use pseudo elements with <option> element. However I am observing a few differences in rendering with different browsers.
So my question is, when is it allowed to use pseudo elements such as ::before, ::after and ::first-letter with an <option> element?
Context
Let's say I have three option elements,
<select>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
I want to add some content before and after the certain elements using ::before and ::after selectors. So I will add a CSS class "special" to one of the elements and add a CSS rule like so,
.special::before {
content: " Before - ";
}
.special::after {
content: " - After ";
}
<select>
<option value="1" class="special">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
It doesn't work in any of the browsers. However, now if I simply modify the select element to allow multiple selections, the pseudo elements will work in Chrome, Firefox and Edge, but still not in IE 11.
.special::before {
content: " Before - ";
}
.special::after {
content: " - After ";
}
<select multiple>
<option value="1" class="special">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
I am able to apply different styles, such as color, font-family, font-size and even display on these pseudo elements!
.special::before {
content: " Before - ";
color: red;
font-size: 15px;
}
.special::after {
content: " - After ";
font-family: Consolas, Arial, Verdana;
display: block;
color: blue;
}
<select multiple>
<option value="1" class="special">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
However, the found that the behavior is not completely consistent with Chrome, Firefox and Edge either.
For example, in Chrome, if I use the ::first-letter pseudo element, it works for option elements under a select element, but not under an optgroup element. However it works fine with both Firefox and Edge.
.special::first-letter {
color: red;
font-size: 20px;
}
select {
height: 100px;
}
<select multiple>
<option value="1" class="special">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<select multiple>
<optgroup label="Item 1">
<option value="1" class="special">One</option>
</optgroup>
<optgroup label="Other items">
<option value="2">Two</option>
<option value="3">Three</option>
</optgroup>
</select>
Note: None of this works when the option element is used within a datalist element. But I am not concerned with that at the moment. I have some examples here in case you wish to see.
Upon searching I found that <option> element is considered a replaced element only in certain cases. However I wasn't able to find any documentation online as to when it is allowed to use pseudo elements with it.

Answer 1

The short answer, if you're looking for a standards-based answer, is that CSS does not currently support using pseudo-elements with form elements, be it ::before/::after, or other pseudo-elements such as ::first-letter. As a result, every browser does its own thing, and there is little to no interop.
As stated, there is no specification for the interaction between most pseudo-elements and form elements and/or replaced content The only statement in any spec for this is in css-content-3, which says:
Note: Replaced elements do not have ::before or ::after pseudo-elements; the content property replaces their entire contents.
But it gets worse: strictly speaking, form elements aren't the same thing as replaced content (despite many people, myself included, often stating the contrary), even though they behave very similarly. Form elements just happen to have platform-specific layout rules that prevent them from being completely styleable with CSS. They may support some common CSS properties and adhere to the box model to some extent, but they have limitations that prevent you from treating them fully as a regular, non-replaced element. This is really the only thing they have in common with replaced content.
To top it all off, the rendering of form elements is not covered in any current CSS spec. Work is being done to try and rein this all in in css-ui-4, but I'm not holding my breath.