javascript - 关闭时更改下拉列表的颜色

Question

使用 CSS，我可以为下拉“选择”列表的各个选项设置字体和背景颜色；然而，这些颜色只出现在实际的下拉列表中。列表未打开时页面框显示的颜色仍为默认颜色。

目前我有一个列表，其中包含许多下拉框和一些选项，能够为每个选项着色以便立即显而易见的选择会很有用。转换为单选按钮或其他输入并不可行。 (我的客户相当挑剔。:-p)

Answer 1

如果这有任何安慰的话，IE 做对了 ;)

您需要一些 JavaScript 才能在其他浏览器中运行:

<select onchange="this.style.backgroundColor=this.options[this.selectedIndex].style.backgroundColor">
    <option style="background-color:yellow">Item 1</option>
    <option style="background-color:lightyellow">Item 2</option>
</select>

使用 css 类名更好:

<select
    onchange="this.className=this.options[this.selectedIndex].className"
    class="important">
    <option class="important" selected="selected">Item 1</option>
    <option class="sorta-important">Item 2</option>
</select>

还有你的CSS:

.important { background-color:yellow; }
.sorta-important { background-color:lightyellow; }

这样您就可以将演示文稿的详细信息分开，并使您的类(class)名称有意义。