默認樣式.png
設計圖.png
在做某個項目的時候遇到select的設計圖與默認樣式不同，查了各種方法，有說在select框外加div，此div寬度小于select框以此隱藏默認圖標。但是這種方法會出現(xiàn)select框斷裂的情況
斷裂.png
select {
/*關鍵：將默認的select選擇框樣式清除*/
appearance:none;
-moz-appearance:none;
-webkit-appearance:none;
background: url("../img/arrow.png") no-repeat scroll right center transparent;
/*非框架時，為下拉小箭頭留出一點位置，避免被文字覆蓋*/
/*padding-right: 10px;*/
}
先把默認樣式隱藏，在設置select框的背景圖為所需的圖標向右對齊即可。
因為我引用了bootstrap框架，所以不用設置padding，這個可根據(jù)自己的實際情況設置。
注意：IE瀏覽器不支持上面隱藏默認樣式的CSS屬性，所以要兼容IE的話還是要用最初提到的方法。
