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相同的類來使其更通用，但這可以回答所提出的特定問題。