select html样式修改,select标签的默认样式修改

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

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

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

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

.select {

-webkit-appearance:

none;

-webkit-border-radius: 0px;

}

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

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

background:transparenturl("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标签外包了一个标签，然后将select标签的border设置为none，给label标签设置border和背景色，很完美的解决了所有的需求。