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; }

这样，您可以将演示文稿的详细信息保持独立，并使您的班级名称有意义。

Answer 2

我在jQuery中做到了：

<select id="ddlColors" style="background-color: White;">
    <option style="background-color: Aqua;">1</option>
    <option style="background-color: Blue;">2</option>
    <option style="background-color: Fuchsia;">3</option>
    <option style="background-color: Gray;">4</option>
</select>
<script>
    $("select").change(function() {
        $("select").css("background-color", $("select option:selected").css("background-color"));
    })
    .change();
</script>

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

2 个答案: