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(提示框)
1200 0
el-input el-select调整字体及内边距
1. 背景 el-input输入框默认提供的字体较小,且内边距较大。 这是为了提供统一的样式和好看的外观。 在某些情况下,我们希望使用较大的字体,且让输入框的内边距小一些以便容纳更多东西。
3031 0
|
JSON 数据格式 内存技术
给layui的upload加了文件大小限制
/*! @Title: layui.upload 单文件上传 - 全浏览器兼容版 @Author: 贤心 @License:MIT */ layui.
6525 0
|
JSON 前端开发 安全
layui框架实战案例(22):多附件上传实战开发实录(php后端、文件删除、数据库删除)
layui框架实战案例(22):多附件上传实战开发实录(php后端、文件删除、数据库删除)
1141 0
|
存储 缓存 NoSQL
【赵渝强老师】基于Redis的旁路缓存架构
本文介绍了引入缓存后的系统架构,通过缓存可以提升访问性能、降低网络拥堵、减轻服务负载和增强可扩展性。文中提供了相关图片和视频讲解,并讨论了数据库读写分离、分库分表等方法来减轻数据库压力。同时,文章也指出了缓存可能带来的复杂度增加、成本提高和数据一致性问题。
219 4
【赵渝强老师】基于Redis的旁路缓存架构
|
前端开发 JavaScript 容器
程序技术好文:纯原生javascript下拉框表单美化实例教程
程序技术好文:纯原生javascript下拉框表单美化实例教程
277 0
|
移动开发 安全 API
阿里云最新域名注册及续费和转入收费价格表参考
目前域名注册管理机构(Verisign)已上调.com中英文域名成本,这一变动将直接影响到全球范围内.com域名价格,各大注册商的.com域名注册、续费、转移价格已同步上涨。以阿里云为例,此次涨价之后,.com英文域名的注册价格由原来的78元涨价到了83元,续费价格也涨到了90元,下面是2024年9月1日涨价之后,阿里云最新的域名注册及续费和转入最新收费价格表。
|
Ubuntu Apache Python
如何在 Ubuntu VPS 上部署 Flask 应用程序
如何在 Ubuntu VPS 上部署 Flask 应用程序
196 1
|
存储 缓存 前端开发
【面试题】你需要知道的webpack高频面试题
【面试题】你需要知道的webpack高频面试题
293 0
|
小程序 前端开发 Java
【开题报告】基于uniapp的在线考试小程序的设计与实现
【开题报告】基于uniapp的在线考试小程序的设计与实现
458 0