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');

  

 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM