CSS select样式优化一个例子
发布时间：2023-08-27 编辑：jiaochengji.com
教程集为您提供CSS select样式优化一个例子等资源，欢迎您收藏本站，我们将为您提供最新的CSS select样式优化一个例子资源
CSS select样式优化一直是美工的一个头痛的事情特别现在平面和立体感越来越强了，所以这个问题与解决方法在网上就有很多了，下面来看一个select样式优化一个例子。
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插件哦
您可能感兴趣的文章：
Mysql中limit的用法实例详解
select标签模拟/美化方法采用JS外挂式插件
mysql limit分页优化方法
mysql优化之LIMIT,OFFSET分页
学习mysql中的limit分页优化
div css优化方法
MySQL limit查询优化的实例详解
实例详解mysql limit大数据量分页优化的方法
CSS弹出DIV 在窗口居中位的例子
mysql where条件语句优化笔记
