HTML< select>选择选项背景颜色CSS样式 [英] HTML <select> selected option background-color CSS style
本文介绍了HTML< select>选择选项背景颜色CSS样式的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
有选择选项的已选颜色的样式吗？例如：
Is there a style for a select option's "selected" color? For example:
<HTML>
<BODY>
<FORM NAME="form1">
<SELECT NAME="mySelect" SIZE="7" style="background-color:red;">
<OPTION>Test 1
<OPTION>Test 2
<OPTION>Test 3
<OPTION>Test 4
<OPTION>Test 5
<OPTION>Test 6
<OPTION>Test 7
</SELECT>
</FORM>
</BODY>
</HTML>
当我选择一个选项时，它变为蓝色，我要覆盖这个和
不同的颜色。在样式中我期望像
selected-color，但它不存在。
When I select an option it turns blue, I want to override this and make it a different color. In the style I expected something like "selected-color", but it doesn't exist.
推荐答案
能够使用纯CSS做到这一点。但是，一个小的javascript可以做得很好。
一种简单的方法 -
You may not be able to do this using pure CSS. But, a little javascript can do it nicely.
A crude way to do it -
var sel = document.getElementById('select_id');
sel.addEventListener('click', function(el){
var options = this.children;
for(var i=0; i < this.childElementCount; i++){
options[i].style.color = 'white';
}
var selected = this.children[this.selectedIndex];
selected.style.color = 'red';
}, false);
这篇关于HTML< select>选择选项背景颜色CSS样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
