firefox 下拉列表行为答案

【问题标题】：firefox dropdown list behaviorfirefox 下拉列表行为
【发布时间】：2012-02-19 04:54:10
【问题描述】：

我有一个清单。

<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/

谁能解释这种行为的原因？有解决办法或解决办法吗？

【问题讨论】：

你想做什么？在我看来，Firefox 是对的，而 IE 是错的。您正在更改下拉菜单所做的第一个选择选项的颜色。如果您想全部更改它们或选择框显示的内容，请设置选择元素的样式。
我只需要其中一个选项为红色并保持红色选中或不选中。正如我所说，IE 具有预期的行为。我需要对 Firefox 做些什么才能获得相同的效果？
你清除浏览器缓存了吗？

标签： javascript firefox drop-down-menu

【解决方案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

【讨论】：