Question

我有一个清单。

<select id="select">
    <option>one</option>
    <option>two</option>
    <option>three</option>
    <option>four</option>  
    <option>five</option>
</select>

此行会更改第一个选项的颜色。

document.getElementById("select").options[0].style.color = "red";

在IE 8中，它表现得很好。在Firefox 9.0.1中，奇怪的事情发生了。从下拉列表中看到的项目会改变颜色。但是，一旦选择该项目，它将返回其默认颜色。我已经在两个浏览器中使用jsfiddle验证了这一点。你可以在http://jsfiddle.net/rvUCk/

访问这个小提琴

任何人都可以解释这种行为的原因吗？是否有解决方法或解决此问题？

Answer 1

这是否符合您的需求。第一个元素总是红色，其他元素是黑色。在IE9，Firefox和Chrome中测试过：

JavaScript的：

document.getElementById("select").options[0].style.color = "red";

CSS：

select {
    color:red;
}
option {
    color: black;
}

HTML：

<select id="select">
    <option>one</option>
    <option>two</option>
    <option>three</option>
    <option>four</option>  
    <option>five</option>
</select>

演示： jsFiddle

firefox下拉列表行为

1 个答案: