自定義select樣式

在做項目中常常會使用到select下拉框，UI設計的下拉框一般比默認的好看，然而select的默認樣式卻修改不了，下面就介紹一下自定義的下拉框：

1.使用純css自定義下拉框的樣式

原理：將默認的樣式清除，自定義樣式，然后設置背景箭頭圖片

html代碼：

<select>
        <option>請選擇</option>
        <option>西瓜</option>
        <option>蘋果</option>
        <option>香蕉</option>
</select>

css代碼：

select{  
    width:200px;  
    height:30px;  
    appearance:none;  
    -moz-appearance:none;  
    -webkit-appearance:none;  
    background: url("../images/sel-bg.png") no-repeat 170px center;  
    background-size:10%;
    font-size:16px;  
    font-family:Microsoft YaHei;  
    color:#666;  
    outline:none;
}  

效果圖：