html选择不同的背景颜色为每个浏览器正常工作的选项？

Question

我希望为每个选项构建多个带有自定义背景颜色的html选择元素:

<select runat="server" id="select">
<option value="A">White</option>
<option value="B">Red</option>
<option value="C">Yellow</option>
<option value="D">Green</option>

当网站加载时,我希望select元素只显示背景颜色而不显示所选选项的文本.只有在打开下拉列表时才能看到文本(白色,红色......).

当用户更改所选值时,背景颜色也应该更改,而文本在关闭的下拉列表中应该是不可见的.

如果解决方案适用于包括IE 9/10在内的大多数浏览器,那将是非常好的.

干杯.

Answer 1

试试这个代码,适用于包括IE在内的各种浏览器:

HTML

<select id="select1" onchange="colourFunction()">
<option class="white" value="A">This should have a WHITE background</option>
<option class="red" value="B">This should have a RED background</option>
<option class="yellow" value="C">This should have a YELLOW background</option>
<option class="green" value="D">This should have a GREEN background</option>
</select>

CSS

#select1 {width:150px; color:rgba(0, 0, 0, 0);}
#select1:focus, #select1:focus {
color:black;
}
.white {background:white;}
.red {background:red;}
.yellow {background:yellow;}
.green {background:green}

JS

function colourFunction() {
var myselect = document.getElementById("select1"),
colour = myselect.options[myselect.selectedIndex].className;
myselect.className = colour;
myselect.blur(); //This just unselects the select list without having to click
somewhere else on the page
}

HTH :)