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