HTML <select>选定的选项背景色CSS样式

选择选项的“选定”颜色有样式吗?例如:


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

当我选择一个选项时,它变成蓝色,我想覆盖它并使它成为不同的颜色。在这种样式中,我期望的是“选定颜色”之类的东西,但它不存在。


慕姐4208626
浏览 495回答 3
3回答

森林海

您可能无法使用纯CSS做到这一点。但是,一些JavaScript可以很好地做到这一点。一种简单的方法-var sel = document.getElementById('select_id');sel.addEventListener('click', function(el){&nbsp; &nbsp; var options = this.children;&nbsp; &nbsp; for(var i=0; i < this.childElementCount; i++){&nbsp; &nbsp; &nbsp; &nbsp; options[i].style.color = 'white';&nbsp; &nbsp; }&nbsp; &nbsp; var selected = this.children[this.selectedIndex];&nbsp; &nbsp; &nbsp; &nbsp; selected.style.color = 'red';&nbsp; &nbsp; }, false);

SMILET

您不能依赖CSS作为表单元素。结果在所有浏览器中差异很大。我认为Safari根本无法让您自定义任何表单元素。最好的选择是使用jqTransform之类的插件(使用jQuery)。编辑:该页面目前似乎无法正常工作。还有自定义表单元素,它支持MooTools,将来可能会支持jQuery。
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

Html5