css修改select下拉列表的默認樣式

select的一些默認樣式咱們很難修改，好比圖標的替換。接下來就說說如何修改這些默認樣式：

---

html代碼：

<div> <select name=""> <option value="apple">蘋果</option> <option value="grape">葡萄</option> </select> </div>

給select添加父元素div目的是爲了，用div的樣式覆蓋住select樣式。

css代碼：

div{ //用div的樣式代替select的樣式 width: 200px; height: 40px; border-radius: 5px; //盒子陰影修飾做用,本身隨意 box-shadow: 0 0 5px #ccc; position: relative; } select{ //清除select的邊框樣式 border: none; //清除select聚焦時候的邊框顏色 outline: none; //將select的寬高等於div的寬高 width: 100%; height: 40px; line-height: 40px; //隱藏select的下拉圖標 appearance: none; -webkit-appearance: none; -moz-appearance: none; //經過padding-left的值讓文字居中 padding-left: 60px; } //使用僞類給select添加本身想用的圖標 div:after{ content: ""; width: 14px; height: 8px; background: url(img/xiala.png) no-repeat center; //經過定位將圖標放在合適的位置 position: absolute; right: 20px; top: 45%; //給自定義的圖標實現點擊下來功能 pointer-events: none; }