CSS進階篇--CSS select樣式優化 含jquery代碼

CSS 下拉選擇菜單基本的CSS樣式不怎麼好看，經過一些簡單的樣式優化，能夠獲得以下圖這樣的：

html結構以下：

<div class="sel_wrap">
    <label>請選擇您所在的城市</label>
    <select class="select" name="" id="c_city">
        <option value="0">請選擇您所在的城市</option>
        <option value="1">中山市</option>
        <option value="2">太原市</option>
        <option value="3">廣州市</option>
    </select>
</div>

css樣式：

.sel_wrap{height:40px;background:#fff url(img/icons.png) no-repeat right -24px;color: #a1a1a1; font-size: 16px;border:1px solid #E4E4E4;cursor:pointer;position:relative;_filter:alpha(opacity=0);}
.sel_wrap label{padding-left:10px;font-size:16px;z-index:2; color: #a1a1a1; line-height: 40px; height: 40px; display: block;}
.sel_wrap .select{width:100%; height:40px; line-height:40px; z-index:4;position:absolute;top:0;left:0;margin:0;padding:0;opacity:0; *margin-top:12px; filter:alpha(opacity=0);cursor:pointer; font-size: 16px;}

jquery代碼：

$(".sel_wrap").on("change", function() {
    var o;
    var opt = $(this).find('option');
    opt.each(function(i) {
        if (opt[i].selected == true) {
            o = opt[i].innerHTML;
        }
    })
    $(this).find('label').html(o);
});

這兒只是提供一種方法而已，固然前面文章中已經寫過用css3模擬select樣式效果更好。

若是您以爲本文對您的學習有所幫助，請多支持與鼓勵。