CSS 下拉選擇菜單基本的CSS樣式不怎麼好看，通過一些簡單的樣式最佳化，可以得到上面的樣式，不相容IE6樣式，因為用到了opacity。
| 代碼如下 |
複製代碼 |
<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>
</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> |
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> |
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外掛程式哦
