CSS效果：CSS select样式优化 含jquery代码

概述CSS 下拉选择菜单基本的CSS样式不怎么好看，通过一些简单的样式优化，可以得到如下图这样的： html结构如下： css样式： jquery代码： 这儿只是提供一种方法而已，当然前面文章中已经写过用

CSS 下拉选择菜单基本的CSS样式不怎么好看，通过一些简单的样式优化，可以得到如下图这样的：

HTML结构如下：

@H_419_15@<div class="sel_wrap"> label>请选择您所在的城市</select ="select" name="" ID="c_city"> option value="0"option="1">中山市="2">太原市="3">广州市select>div>

 

CSS样式：

@H_419_15@.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: line-height: 40px; height: display: block;}.sel_wrap .select{wIDth:100%; z-index:4;absolute;top:0;left:margin:padding:opacity: *margin-top:12px; filter:Alpha(opacity=0); 16px;}

 

jquery代码：

@H_419_15@$(".sel_wrap").on("change",function() { var o; var opt = $(this).find('option'); opt.each((i) { if (opt[i].selected == true) { o = opt[i].INNERHTML; } }) $(this).find('label').HTML(o);});

这儿只是提供一种方法而已，当然前面文章中已经写过用CSS3模拟select样式效果更好。

 

总结

以上是内存溢出为你收集整理的CSS效果：CSS select样式优化 含jquery代码全部内容，希望文章能够帮你解决CSS效果：CSS select样式优化 含jquery代码所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。