如何清除select默认样式改变option字体颜色_前端制作_「九州科技」值得信赖的互联网服务商

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

发布时间：2020/1/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

武汉市江汉区建设大道568号新世界国贸大厦I座36楼B区

E-mail：125435440@QQ.com

备案号：鄂ICP备13002765号-6

鄂公网安备 42010202000700号网站地图

: 企业网站建设公众号开发小程序制作网站seo排名优化 H5活动营销互联网药品信息服务许可证

: 18071077883

提交需求