css去除chrome下select元素默認border-radius

在mac下的chrome,對於select元素會默認有一個border-radius，當然有些情況下並不需要圓角，所以就要去掉。 比較常用的方法是：

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

 

但是這個方法有個缺點，因為要瀏覽器默認樣式全部干掉了，所以右邊原本的上下箭頭也沒了，所以推薦另外一種方案：

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

這種方法的效果就比較完美。