css select下拉菜单样式优化
推荐：css下拉菜单
说明：不兼容ie6样式，因为用到了opacity。
1、html部分
复制代码 代码示例:
<section class="dguide">
<div class="inner">
<div class="dguide-form clearfix">
<div class="dguide-select-area" id="select">
<ul>
<li class="half-col first-col">
<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>
</select>
学习plc，就到plc学堂(www.plcxue.com).
</div>
</li>
<li class="half-col">
<div class="sel_wrap">
<label>请选择区域</label>
<select class="select" name="" id="c_eara">
<option value="0">石岐区</option>
<option value="1">火炬开发区</option>
<option value="2">西区</option>
</select>
</div>
</li>
<li class="one-col">
<div class="sel_wrap">
<label>请选择就医医院</label>
<select class="select" name="" id="c_hostipal">
<option value="0">医院名字1</option>
<option value="1">医院名字2</option>
<option value="2">医院名字3</option>
</select>
</div>
</li>
<li class="one-col">
<div class="sel_wrap">
<label>请选择挂号科室</label>
<select class="select" name="" id="c_city">
<option value="0">科室名字1</option>
<option value="1">科室名字2</option>
<option value="2">科室名字3</option>
</select>
</div>
</li>
</ul>
</div>
<div class="dguide-sub">
<button class="btn btn-yellow">预约挂号</button>
</div>
</div>
</div>
</section>
2、css样式：
复制代码 代码示例:
<style type="text/css">
ul{list-style: none; margin: 0; padding: 0;}
.clearfix:before, .clearfix:after{display: table; content:"";}
.clearfix:after{clear: both;}
.clearfix{zoom: 1;}
body{font:14px/26px Microsoft Yahei, Helvetica,arial; margin: 0; max-width: 600px;}
/*dguide*/
.dguide{background: #F2F2F2;}
.dguide-select-area ul{font-size: 0; *word-spacing: -1px;}
.dguide-select-area li{margin-bottom: 26px; letter-spacing: normal;}
.dguide-select-area .half-col{display: inline-block; *display: inline; *zoom:1; width: 50%; vertical-align: top; letter-spacing: normal; word-spacing: normal; font-size: 14px;}
@media screen and (-webkit-min-device-pixel-ratio:0){
.dguide-select-area ul{letter-spacing: -5px;}
}
.dguide-select-area .first-col .sel_wrap{margin-right: 20px;}
.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;}
.dguide-sub .btn{width: 100%; text-align: center; line-height: 64px; font-size: 20px; border: none; }
.dguide-sub .btn-yellow{background: #F06A26; color: #fff;}
</style>
3、jquery代码：
复制代码 代码示例:
<script type="text/
javascript">
$(".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);
});
</script>
效果：
注意：记得加载jquery插件。
