Question

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

最终，这有效，只有一个令人沮丧的例外。如果OPTION中的第一个 SELECT被赋予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渲染为红色。'第一个孩子“规则是努力克服可能存在的任何默认样式。

奇怪的是，这个样式在旧的，令人讨厌的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来使其更通用，但这会回答所提出的具体问题。

IE11没有将CSS类应用于Select下拉列表的第一个Option元素

1 个答案: