如何在IE9中改变禁用选项中的文本颜色？

Question

除了IE9之外的所有主要浏览器，使用以下代码可以将禁用选项的文本颜色设置为红色：

<option disabled='disabled' class='red' value=''>No Students available to take up Assessment</option>

...
//CSS
.red{
color:red;
}

但是在IE浏览器中，文本颜色没有改变，保持为灰色的禁用状态。如何让禁用状态的颜色在IE9中改变？

- user1723760

---

我已经发现仅通过CSS无法完成，需要在JavaScript中为IE9找到解决方法。 - user1723760

Answer 1

也许可以在CSS中使用属性选择器？

option:disabled,
option[disabled] {
    color: red;
}

- FiniteLooper

---

我不想所有已禁用的选项都是红色的，所以我将尝试您的代码，但将 option 替换为 .red。 - user1723760

好的，代码已更新。但是我想指出的部分仍然是一样的。请使用[disabled]代替:disabled。 - FiniteLooper

.disabled的.red和option都没有起作用。 - user1723760

@ChrisBarr 我实际上尝试使用 [disabled] 规则，但由于某种原因，在 IE 中选择禁用选项的唯一方法是通过 :disabled 伪类。 - thordarson

真的吗？那很奇怪。我猜在这种情况下同时使用两者作为万能规则可能是值得的。再次更新答案。 - FiniteLooper

Answer 2

像这样的吗？

select :disabled.red {
    color: red;
}

这是来自Microsoft的关于:disabled伪类的文档。

这是一个在IE9及以上版本中应该可以正常工作的fiddle。

---

更新：这似乎只在IE>8中有效。这个答案指出了在表单元素上使用readonly属性的解决方法。但对于选项标签来说，这不是一个选择。

有一些旧版IE的JavaScript解决方法。一个简单的谷歌搜索让我找到了这个网站，它提供了一个jQuery解决方案。

来自博客：

通过添加一些 CSS 样式魔法，您最终会得到在所有其他现代浏览器中完全相同的结果。 您可以使用 JavaScript 启用和禁用。许多人编写了代码，使选项看起来像已禁用，等待单击选项元素，然后模糊或聚焦下一个/先前选择的选项，使其表现得像已禁用。 我已经想出了与 jQuery 一起使用的功能，通过将其转换为 optgroup 然后再转换回来来禁用/启用选择选项。它在 Firefox 2＆3、Safari 3、IE 6 + 7 中进行了测试，并且在 Opera 9 中也可以工作（尽管 opgroups 跳到底部）。

- thordarson

---

我尝试了.red:disabled{color:red;}，但是没有起作用。我不能使用option:disabled {color: red;}的原因是我不想让所有禁用选项都变成红色。 - user1723760

@user1723760，我已经更新了代码，只对“.red”选项进行着色。 - thordarson

我尝试了你更新的代码，但颜色仍然没有改变。即使在fiddle中也没有显示颜色的变化。 - user1723760