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

html代碼：

<div>
    <select name="">
        <option value="芝士">芝士</option>
        <option value="奶油">奶油</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;
            }
 

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