IE11 not applying CSS class to first Option element of Select dropdown

Question

A certain .aspx page renders a simple SELECT list with various OPTIONs. Some, but not all, of these OPTION elements will have a special style class applied to render them in a different color to reflect a particular distinct status.

Ultimately, this works, with a single frustrating exception. If the first OPTION within the SELECT is given the CLASS designation, IE11 will not render that option with the color specified in the corresponding CSS rule. When viewing the page within the IE11 dev tools, it appears that the rule is being applied, yet, visually, it isn't. If the particular OPTION appears as any other item in the SELECT, the rule works.

The solution at hand, a snippet of which is provided below, was modeled after a seemingly very similar case presented here: How to change the text color of first select option

<style>
select {color: black;}
select option {color: black;}
select option.specialStatus{
    color: red;
}
select option.specialStatus:first-child{
    color: red;
}
</style>
..
<select>
    <option class='specialStatus' value=1>Hi</option>
    <option value=2>Bye</option>
</select>

The intent, in effect, is to say "render this SELECT with OPTIONs ordinarily in black, unless they are given the 'specialStatus' class. When 'specialStatus' is present, render the OPTION in red. The 'first-child' rule was an effort to overcome any default styling that may be present.

Oddly enough, this styling works 100% of the time in old, nasty IE8 - this behavior of the first OPTION not being honored is seen only in IE11. That's why the subject solution linked above seemed the obvious choice - it works, but obviously something in conjunction with the class designations is causing a problem. Help would be most appreciated in diagnosing exactly what's wrong.

IE10/11 are weird in rendering SELECT component. I suggest a jQuery plugin like SELECT2 that transform the SELECT into cross-browser control — Yuriy Galanter, Aug 19 '14 at 20:30
Thanks for the suggestion, @YuriyGalanter, but unfortunately that's not an option in this case for unrelated reasons. — David W, Aug 19 '14 at 20:32
I put together a simple fiddle http://jsfiddle.net/rzL6o3g4/ this shows 1st option in IE11 as red. Do I miss something? — Yuriy Galanter, Aug 19 '14 at 20:35
Thanks @YuriyGalanter, but your fiddle exhibits precisely the same behavior in IE11 that I am trying to solve; IE11 does not render the item in the color specified by the style rule (red) unless the *other* item is selected. — David W, Aug 19 '14 at 20:44
And the second item is selected; not the first, which is consistent with what I described before. When the page renders initially, "Hi!" (the first option) is not rendered in red. HEre is what I am seeing: http://i.imgur.com/wWeG3j0.png — David W, Aug 19 '14 at 20:54
The problem is that the `select` color dictates what the color of the option is when it is already selected (without the drop-down open). I see a similar behavior in Chrome. AFAIK, the only way of doing what you want is using JavaScript. — Heretic Monkey, Aug 19 '14 at 21:03
It seems that IE11 respects `:checked` pseudo-class for `option`: http://jsfiddle.net/rzL6o3g4/2/ — Ilya Streltsyn, Aug 19 '14 at 21:45

score 2 · Accepted Answer · answered Aug 19 '14 at 21:14

Adding to my comment, the problem is that the select color is making the Hi value black when selected. To make it work, you'll need JavaScript. I updated @YuriyGalanter's fiddle to include the necessary JavaScript:

function changeSelectClass(e) {
    this.classList.remove('specialStatus');
    if (this.options[this.selectedIndex].className.indexOf('specialStatus') !== -1) {
        this.classList.add('specialStatus');
    }
}
document.getElementsByTagName('select')[0].onchange = changeSelectClass;
changeSelectClass.call(document.getElementsByTagName('select')[0]);

and CSS:

select { color: black; }
option { color: black; }
select.specialStatus, option.specialStatus { color: red; }

You could make it more generic by applying the same class(es) to the select as were applied to the option, but this answers the specific question asked.

Thank you much for the effort, @MikeMcCaughan. At least it shows I wasn't *totally* off my rocker, even tho my question got downvoted LOL :) — David W, Aug 20 '14 at 00:25

IE11 not applying CSS class to first Option element of Select dropdown

1 Answers1