为了账号安全,请及时绑定邮箱和手机立即绑定

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

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

慕姐4208626 2019-11-03 08:04:29
选择选项的“选定”颜色有样式吗?例如:<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>当我选择一个选项时,它变成蓝色,我想覆盖它并使它成为不同的颜色。在这种样式中,我期望的是“选定颜色”之类的东西,但它不存在。
查看完整描述

3 回答

?
森林海

TA贡献2011条经验 获得超2个赞

您可能无法使用纯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);



查看完整回答
反对 回复 2019-11-04
?
SMILET

TA贡献1796条经验 获得超4个赞

您不能依赖CSS作为表单元素。结果在所有浏览器中差异很大。我认为Safari根本无法让您自定义任何表单元素。


最好的选择是使用jqTransform之类的插件(使用jQuery)。


编辑:该页面目前似乎无法正常工作。还有自定义表单元素,它支持MooTools,将来可能会支持jQuery。



查看完整回答
反对 回复 2019-11-04
  • 3 回答
  • 0 关注
  • 494 浏览

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信