select下拉框的默认选项颜色为灰色，选中项颜色为黑色。

最新推荐文章于 2023-06-26 17:38:41 发布

行走的碎道

最新推荐文章于 2023-06-26 17:38:41 发布

阅读量4.9k

点赞数 2

分类专栏： jQuery 文章标签： javascript

本文链接：https://blog.csdn.net/jrl12345/article/details/104947990

版权

jQuery 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了一种使用CSS和JavaScript优化下拉框颜色的方法，通过设置默认选项为灰色，选中项为黑色，提升用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

标题select下拉框的默认选项颜色为灰色，选中项颜色为黑色。

通常情况下下拉框都会有一个默认选项“请选择”，在项目中一般会设置该默认选项的颜色与选中的项不同，一般会设置默认选项颜色为灰色，选中项颜色为黑色来增加用户体验。

    var unSelected = "#999";
    var selected = "#333";
    $(function () {
        $("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);
            }
        });
    }