IE11未将CSS类应用于“选择”下拉列表的第一个Option元素

Question

某个.aspx页呈现具有各种OPTIONs的简单SELECT列表。 这些OPTION元素中的某些（但不是全部）将具有一个特殊的样式类，该类将应用为以不同的颜色呈现它们以反映特定的不同状态。

最终，只有一个令人沮丧的例外，它才能起作用。 如果SELECT的第一个 OPTION被指定为CLASS，则IE11将不会使用相应CSS规则中指定的颜色来呈现该选项。 当IE11开发工具中查看的页面， 似乎该规则被应用，但是，在视觉上，它不是。 如果特定的OPTION与SELECT中的任何其他项目一样出现，则该规则有效。

下面提供了一个摘要，此解决方案是根据此处显示的一个看似非常相似的情况建模的： 如何更改首选选项的文本颜色

<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>

实际上，其意图是说“除非给它们赋予'specialStatus'类，否则通常以黑色将带有OPTIONs的SELECT呈现。当存在'specialStatus'时，将OPTION呈现为红色。'first-child'规则是努力克服可能存在的任何默认样式。

奇怪的是，这种样式在旧的，讨厌的IE8中有100％的时间有效-只有在IE11中才能看到第一个OPTION未被兑现的行为。 这就是上面链接的主题解决方案似乎是显而易见的选择的原因-它可以工作，但显然与类名结合使用会引起问题。 在准确诊断出问题时将非常感谢您的帮助。

Answer 1

添加到我的评论中，问题是select颜色使Hi值在选择时变成黑色。 要使其正常工作，您将需要JavaScript。 我更新了@YuriyGalanter的小提琴，以包含必要的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]);

和CSS：

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

您可以通过对select应用与对option相同的类来使其更通用，但这可以回答所提出的特定问题。