select标签的默认样式修改

Posted 2020-09-18 梁少豪

在项目中，用到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和背景色，很完美的解决了所有的需求。