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

首页课程实战体系课手记专栏慕课教程

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

选择选项的“选定”颜色有样式吗？例如：

<HTML>

<BODY>

<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

浏览 468回答 3

3回答

森林海

您可能无法使用纯CSS做到这一点。但是，一些JavaScript可以很好地做到这一点。一种简单的方法-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);

0 0

SMILET

您不能依赖CSS作为表单元素。结果在所有浏览器中差异很大。我认为Safari根本无法让您自定义任何表单元素。最好的选择是使用jqTransform之类的插件（使用jQuery）。编辑：该页面目前似乎无法正常工作。还有自定义表单元素，它支持MooTools，将来可能会支持jQuery。

0 0

随时随地看视频慕课网APP