firefox 下拉列表行为

Posted 2023-02-22

【中文标题】firefox 下拉列表行为

【英文标题】：firefox dropdown list behavior

【发布时间】：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 做些什么才能获得相同的效果？

你清除浏览器缓存了吗？

【参考方案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