select让默认选项的字体颜色和真正的值不一样的实现方法

最新推荐文章于 2024-11-25 15:38:26 发布

原创最新推荐文章于 2024-11-25 15:38:26 发布 · 1.4k 阅读

1 ·

CC 4.0 BY-SA版权

原生专栏收录该内容

12 篇文章

订阅专栏

本文介绍了一个使用CSS设置下拉菜单样式的案例，并通过jQuery实现了点击事件的监听，当选择不同的选项时，能够改变下拉框的字体颜色。

//样式
select{
    color: #D8D8D8;
}

<select id="type">
	<option value="" selected>请选择类别</option>
    <option value="强标">强标</option>
    <option value="推标">推标</option>
</select>

//注意我这里用到了jquery啊
$("select").click(function(){
   $("select").find("option").each(function(){
        $(this).addClass("active")
    })
    if(!$(this).val()){
        document.getElementById("type").style.color = "#D8D8D8"
    }else{
        document.getElementById("type").style.color = "#333"
    }

})