关闭时更改下拉列表的颜色 [英] Changing the colour of a dropdown list when closed

问题描述

使用CSS我可以为下拉选择列表的各个选项设置字体和背景颜色;但是，这些颜色只显示在实际的下拉菜单中。

With CSS I can set font and background colours for the individual options of a dropdown "select" list; however, these colours only show up in the actual dropdown. The colours shown in the box on the page when the list is not open are still the defaults.

目前我有一个列表，其中有许多下拉框有几个选项，而且能够对每个选项进行着色将使选择立即显而易见将是有用的。转换到单选按钮或其他输入是不可行的。 （我的客户相当挑剔。:-p）

Currently I have a list with many dropdown boxes having a few options, and it would be useful to be able to colour each option so that the selection is immediately obvious. Converting to radio buttons or other input is not really feasible. (My clients are rather picky. :-p)

推荐答案

如果这是任何安慰，IE会正确）;

IE gets it right if that's any consolation ;)

您需要一些JavaScript才能在其他浏览器中使用：

You'll need some JavaScript for it to work in other browsers:

<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类名称：

Even nicer with css class names:

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

以这种方式，您的演示文稿分开保存，并且您的类名有意义。

That way you keep your presentation details separate and your class names meaningful.

这篇关于关闭时更改下拉列表的颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！