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>
相关文章
|
7月前
|
前端开发
复选框样式修改(复选框变为圆形)
复选框样式修改(复选框变为圆形)
|
前端开发 JavaScript
点击按钮,将奇数列的li背景色设置为红色,偶数列li背景色设置为绿色
点击按钮,将奇数列的li背景色设置为红色,偶数列li背景色设置为绿色
|
7月前
|
JavaScript
Element_select 选择器 选中框中显示不了选中的值
解决Vue中`el-select`选择器不显示选中值的问题:在`selectChanged`方法中添加`this.$forceUpdate()`,强制组件更新,使输入框显示选择的值。示例代码包括模板和方法。
954 2
|
7月前
el-select如何自定义下拉选项框的宽度
el-select如何自定义下拉选项框的宽度
1021 0
|
7月前
|
JavaScript 前端开发
JS单选框默认选中样式修改,为白色背景中心有黑色小圆点的样式
JS单选框默认选中样式修改,为白色背景中心有黑色小圆点的样式
57 0
|
前端开发
input框点击时去掉默认的外层边框
input框点击时去掉默认的外层边框
64 0
bootstrap-table选中checkbox改变行的背景颜色
bootstrap-table选中checkbox改变行的背景颜色
142 0
textarea去掉边框和取消选中后的边框
textarea去掉边框和取消选中后的边框
191 0
|
前端开发
鼠标点击<input>输入框后边框发生颜色变化
鼠标点击<input>输入框后边框发生颜色变化
99 0