导航

如何清除select默认样式改变option字体颜色

发布时间:2020-01-11 17:51:33 来源:「九州科技」值得信赖的互联网服务商
在武汉网站制作过程中,我们就经常用到select下拉框表单,但是我们发现控制他的样式用简单的软件设置难以做到,他不像input那样可以改变默认文字颜色、文本框背景等,那么我们今天就给大家一个设置方法。

首先来看看如何清除select默认样式,代码如下

select,option{
    /*Chrome和Firefox里面的边框是不一样的,所以复写了一下*/
    border: none;
    outline: none;
    /*很关键:将默认的select选择框样式清除*/
    appearance:none;
    -moz-appearance:none;
    -webkit-appearance:none;
    /*将背景改为红色*/
    background:#fff;
    /*加padding防止文字覆盖*/
    padding-right: .14rem;
}
/*清除ie的默认选择框样式清除,隐藏下拉箭头*/
select::-ms-expand {display: none;}

如何改变option项字体颜色呢?

如下js代码即可实现,不妨来试试哦!

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

最新资讯
相关推荐
服务项目
微信客服
180-7107-7883
地址:湖北省武汉市解放大道航天双城6栋25层
E-mail:125435440@QQ.com
备案号:鄂ICP备13002765号-6    鄂公网安备 42010202000700号    网站地图
九州科技,您身边的互联网应用方案提供商-高端网站建设-网站制作-网站开发-网页设计-微信开发-小程序开发
高端网站建设 公众号开发 小程序制作 网站seo优化 H5活动营销 互联网产品

18071077883

提交需求