javascript - IE11 未将 CSS 类应用于选择下拉列表的第一个选项元素

Question

某个 .aspx 页面呈现一个简单的 SELECT 列表，其中包含各种 OPTIONs。这些 OPTION 元素中的一些(但不是全部)将应用一个特殊的样式类，以不同的颜色呈现它们以反射(reflect)特定的不同状态。

最终，这可行，只有一个令人沮丧的异常。如果 SELECT 中的第一个 OPTION 被指定为 CLASS，IE11 将不会使用相应 CSS 规则中指定的颜色呈现该选项。在 IE11 开发工具中查看页面时，似乎正在应用规则，但从视觉上看，事实并非如此。如果特定的 OPTION 与 SELECT 中的任何其他元素一样出现，则该规则有效。

手头的解决方案(下面提供了其中的一个片段)是根据此处介绍的一个看似非常相似的案例建模的: 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>

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

奇怪的是，这种样式在旧的、令人讨厌的 IE8 中 100% 有效——第一个 OPTION 未被接受的行为仅在 IE11 中出现。这就是为什么上面链接的主题解决方案似乎是显而易见的选择 - 它有效，但显然与类名称相关的东西导致了问题。在准确诊断出问题所在时，我们将不胜感激。

Answer 1

添加到我的评论中，问题是 select 颜色在选择时使 Hi 值变黑。要使其工作，您需要 JavaScript。我更新了@YuriyGalanter 的 fiddle包含必要的 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 一样，但这回答了所提出的具体问题。