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

html 代碼：

<div>

     <select name= "" >

 

         <option value= "芝士" >芝士</option>

         <option value= "奶油" >奶油</option>

     </select>

</div>

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

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;

}