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); } |
|
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插件哦
时间： 2024-08-01 20:10:28