javascript - Firefox 下拉列表行为

Question

我有一个 list 。

<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 验证了这一点。您可以在这里访问这个 fiddle 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