select下拉框美化

html:
<li>
                        <span>年份:</span>
                        <select @change="" class="select" id="">
                            <option></option>
                        </select>
                    </li>
                    <li>
                        <span>月份:</span>
                        <select @change="" id="selectMonth">
                            <option></option>
                        </select>

                    </li>                 

css:
select {
        height: 24PX;
        width: 76px;
        /*Chrome和Firefox里面的邊框是不一樣的，所以復寫了一下*/
        border: 1px solid #8bd1b7;
        /*很關鍵：將默認的select選擇框樣式清除*/
        appearance:none;
        -moz-appearance:none;
        -webkit-appearance:none;
        /*在選擇框的最右側中間顯示小箭頭圖片*/
        background: url("../../static/imgs/select_down.png") no-repeat right 6px center ;
        /*為下拉小箭頭留出一點位置，避免被文字覆蓋*/
        padding-right: 14px;
    }
    /*清除ie的默認選擇框樣式清除，隱藏下拉箭頭*/
    select::-ms-expand { display: none; }

http://www.w3school.com.cn/cssref/pr_appearance.asp

http://www.codesec.net/view/475250.html