CSS select樣式優化

下拉選擇菜單基本的CSS樣式不怎么好看，通過一些簡單的樣式優化，就可以起到美化的作用了。

<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);
}).trigger('change');