关闭时更改下拉列表的颜色(Changing the colour of a dropdown lis

使用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>

文章来源: Changing the colour of a dropdown list when closed