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