select下拉框默认option为灰色,选中option颜色为白色

简介: select下拉框默认option为灰色,选中option颜色为白色

select下拉框默认option为灰色,选中option颜色为白色

代码如下:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
        <style>
            div {
                background: #0b2b5f;
                height: 800px;
            }
            select {
                width: 250px;
                height: 36px;
                margin: 10px 0 0 10px;
                padding-left: 10px;
                border: none;
                box-shadow: 0px 0px 10px #005efe inset;
                background: #122742;
                color: #fff;
            }
        </style>
    </head>
    <body>
        <div>
            <select class="select">
                <option>请选择</option>
                <option value="11111">11111</option>
                <option value="22222">22222</option>
                <option value="33333">33333</option>
            </select>
        </div>
    </body>
    <script>
        $(function() {
            var unSelected = "#999";
            var selected = "#fff";
            $("select").css("color", unSelected);
            $("option").css("color", selected);
            $("select").change(function() {
                var selItem = $(this).val();
                if(selItem == $(this).find('option:first').val()) {
                    $(this).css("color", unSelected);
                } else {
                    $(this).css("color", selected);
                }
            });
        });
    </script>
</html>
目录
打赏
0
0
0
0
10
分享
相关文章
点击按钮,将奇数列的li背景色设置为红色,偶数列li背景色设置为绿色
点击按钮,将奇数列的li背景色设置为红色,偶数列li背景色设置为绿色
104 0
Element_select 选择器 选中框中显示不了选中的值
解决Vue中`el-select`选择器不显示选中值的问题:在`selectChanged`方法中添加`this.$forceUpdate()`,强制组件更新,使输入框显示选择的值。示例代码包括模板和方法。
1038 2
|
10月前
el-select如何自定义下拉选项框的宽度
el-select如何自定义下拉选项框的宽度
1194 0
CSS:去除input和button边框以及选中时边框默认样式
CSS:去除input和button边框以及选中时边框默认样式
bootstrap-table选中checkbox改变行的背景颜色
bootstrap-table选中checkbox改变行的背景颜色
154 0
input框点击时去掉默认的外层边框
input框点击时去掉默认的外层边框
86 0
textarea去掉边框和取消选中后的边框
textarea去掉边框和取消选中后的边框
225 0
通过select下拉框里的value控制div显示与隐藏
通过select下拉框里的value控制div显示与隐藏
106 0
设置按钮背景为透明去掉button按钮左右两边的留白
设置按钮背景为透明去掉button按钮左右两边的留白
jQuery设置下拉框select 默认选中option
$("#id option:first").prop("selected", 'selected');  将请选择加入到select中第一位 $("#id").
1605 0