自定义select 并修改默认颜色

火火火火_Shy

于 2020-05-21 11:26:45 发布

阅读量1.4k

点赞数

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

本文链接：https://blog.youkuaiyun.com/yangmy_Shy/article/details/106252846

版权

javascript 专栏收录该内容

25 篇文章

订阅专栏

这篇博客主要介绍了如何通过JavaScript和CSS来定制HTML Select元素的默认样式，包括颜色和外观的改变，以实现更符合网站设计的需求。

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

css:

.subLblSelect {
    position: relative;
    display: inline-block;
}
.subLblSelect select {
    padding-left: 16px;
    width: 372px;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    border: 1px solid #E1E4E9;
    height: 50px;
    line-height: 50px;
    position: relative;
}

.subLblSelect:before{
    position: absolute;
    content: '';
    right: 0;
    top: 0;
    width: 40px;
    height: 40px;
    background: url(../images/select_arrow.png) center no-repeat;
    z-index: 10;
    line-height: 38px;
    pointer-events: none;
}

HTML：
<label class="subLblSelect">
    <select class="submitSelect" style="color: #C4C9CE">
        <option value="0">订单状态</option>
        <option value="1">已提交</option>
        <option value="2">待检测</option>
        <option value="3">待审核</option>
    </select>
</label>

js:

<script>
   $(function () {
       $(".submitSelect").on('change',function(){
           if($(this).val() !== "" ) {
               if($(this).val() == '0'){
                   $(this).css({color: '#C4C9CE'})
               }else {
                   $(this).css({color: '#303840'}); //选中后颜色
               }
           } else {
               $(this).css({color: '#C4C9CE'}); //默认颜色
           }
       });
   });
</script>