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(提示框)
1419 0
|
10月前
|
缓存 小程序 视频直播
基于uni-app+vite5+vue3实战短视频+直播+聊天app应用
基于uniapp+vue3+vite5从0-1实战搭建仿抖音/微信直播带货商城。集短视频+聊天+直播功能于一体。实现全屏沉浸式切换短视频/直播,支持编译运行到h5+小程序端+app端。
578 4
|
缓存 应用服务中间件 区块链
PbootCms上传图片变模糊、上传图片尺寸受限的解决方案
PbootCms上传图片变模糊、上传图片尺寸受限的解决方案
|
关系型数据库 MySQL 数据安全/隐私保护
mysql : 无法将“mysql”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。请检查
mysql : 无法将“mysql”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。请检查
mysql : 无法将“mysql”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。请检查
简单好用的图片取色器【可取RGB数值】
这篇文章介绍了如何使用Snipaste工具进行截图和取色,包括按下快捷键F1截图、选择图片区域、移动鼠标取色以及复制颜色值的步骤,并提供了操作界面的截图。
|
监控 前端开发 JavaScript
JS Navigator.sendBeacon 可靠的、异步地向服务器发送数据
Navigator.sendBeacon 是一个用于发送少量数据到服务器的 API,尤其适用于在页面即将卸载时发送数据,如日志记录、用户行为分析等。 与传统的 AJAX 请求不同,sendBeacon 方法的设计目标是确保数据在页面卸载(例如用户关闭标签页或导航到新页面)时能够可靠地发送。 Navigator.sendBeacon 方法可用于通过 HTTP POST 将少量数据异步传输到 Web 服务器。 它主要用于将统计数据发送到 Web 服务器,同时避免了用传统技术(如:XMLHttpRequest)发送分析数据的一些问题。
771 1
|
JavaScript
js金额数字格式化
本文介绍了两种实现数字格式化的方法:字符串操作与正则表达式。首先,通过递归地在每三位数字间插入逗号来格式化整数。接着,扩展该功能以支持自定义小数位数及分隔符,适用于更广泛的场景。最后,展示了如何利用正则表达式简化上述过程,实现相同的功能。
648 0
|
JavaScript 前端开发 索引
探讨JavaScript中获取<select>元素选中情况的技术
探讨JavaScript中获取<select>元素选中情况的技术
1162 0
|
JavaScript 前端开发 UED
window.location.href的用法总结
window.location.href的用法总结
1811 0
|
JavaScript
【vue】图片懒加载 vue-lazyload 使用
【vue】图片懒加载 vue-lazyload 使用
344 0