select下拉框美化

Posted 2020-10-14 黄鹂

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