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>
相关文章
Layui 内置方法 - layer.msg(提示框)
Layui 内置方法 - layer.msg(提示框)
1231 0
el-input el-select调整字体及内边距
1. 背景 el-input输入框默认提供的字体较小,且内边距较大。 这是为了提供统一的样式和好看的外观。 在某些情况下,我们希望使用较大的字体,且让输入框的内边距小一些以便容纳更多东西。
3077 0
|
JSON 数据格式 内存技术
给layui的upload加了文件大小限制
/*! @Title: layui.upload 单文件上传 - 全浏览器兼容版 @Author: 贤心 @License:MIT */ layui.
6539 0
|
JSON 前端开发 安全
layui框架实战案例(22):多附件上传实战开发实录(php后端、文件删除、数据库删除)
layui框架实战案例(22):多附件上传实战开发实录(php后端、文件删除、数据库删除)
1204 0
|
存储 缓存 NoSQL
【赵渝强老师】基于Redis的旁路缓存架构
本文介绍了引入缓存后的系统架构,通过缓存可以提升访问性能、降低网络拥堵、减轻服务负载和增强可扩展性。文中提供了相关图片和视频讲解,并讨论了数据库读写分离、分库分表等方法来减轻数据库压力。同时,文章也指出了缓存可能带来的复杂度增加、成本提高和数据一致性问题。
230 4
【赵渝强老师】基于Redis的旁路缓存架构
|
机器学习/深度学习 算法
神经网络的结构与功能
神经网络是一种广泛应用于机器学习和深度学习的模型,旨在模拟人类大脑的信息处理方式。它们由多层不同类型的节点或“神经元”组成,每层都有特定的功能和责任。
1045 0
|
关系型数据库 MySQL
MySQl优化:使用 jemalloc 分配内存
MySQl优化:使用 jemalloc 分配内存
|
缓存 JavaScript 前端开发
GitLab 官网使用 pages 服务,发布 vue 前端项目
GitLab 官网使用 pages 服务,发布 vue 前端项目
477 1
|
消息中间件 Java 微服务
Eureka介绍与使用
Eureka介绍与使用