首页 > 代码库 > select标签的默认样式修改

select标签的默认样式修改

在项目中,用到select标签,需要对select标签自定义样式。

在chrome浏览器中会对select有一个默认的border-radius,并且无法去掉。

可以通过下面的方法来解决:

 

1、需要通过下面的css才能修改select的border-radius

.select {
     -webkit-appearance: none;
     -webkit-border-radius: 0px;
}

但是这个方法会让select自带的三角箭头消失。

可以通过background来设置一个背景三角箭头来解决。

background: transparent url("http://ourjs.github.io/static/2015/arrow.png") no-repeat scroll right center; transparentpadding-right:20px;

 

2、还有一种方法通过outline来解决

.select {
    border: 0px;
    outline: 1px solid rgb(204,204,204);
}

 

3、以上两种方法在网上都能查到,但是项目的需求比较复杂。

如果使用方法1,三角形的颜色固定不能随select字体颜色变化(因为我们需求可以自定义select的字体的颜色)

于是乎我想了用:before伪元素来添加一个三角形,颜色确实可以动态改变,但是这个三角形会挡住select的点击(因为select的背景色也要自定义,所以不能置于底部)

如果使用方法2,outline不能够设置radius,因为我们select的radius也要求可以自定义。

所以我在select标签外包了一个<label>标签,然后将select标签的border设置为none,给label标签设置border和背景色,很完美的解决了所有的需求。

 

select标签的默认样式修改