简单的css,jquery优化select下拉框
先说一下为什么要美化select，我们先来看一下默认的样式在各浏览器里的显示效果
是不是很不一样，而且个浏览器在鼠标经过的样式也是千差万别,单纯的css修改虽然也可以，但是有非常大的局限性，链接在这：http://www.cnblogs.com/shishm/archive/2012/03/02/2376759.html，我就不赘述， 这个办法只适用于页面宽度固定的时候，但我们项目基本都是宽度自适应的，样式也是完全基于bootstrap写的，所以这个办法显然行不通，所以我的办法就是用了简单的cssh和jquery代码就轻松搞定了。
下面是最终项目里呈现的效果
下面是具体的代码，先是html
1 <a class="btn-select"> 2 <span class="cur-select">请选择</span> 3 <select class="form-control"> 4 <option>这是IE浏览器下的默认显示效果</option> 5 <option>这是Firefox浏览器下的默认显示效果</option> 6 <option>这是Opera浏览器下的默认显示效果</option> 7 <option>这是chrome浏览器下的默认显示效果</option> 8 </select> 9 </a>
接着css样式优化
1 .btn-select { 2 position: relative; 3 display: block; 4 height:30px; 5 line-height: 30px; 6 border:1px solid #ccc; 7 color:#3D3F42; 8 } 9 .btn-select .cur-select { 10 position: absolute; 11 display: block; 12 width: 100%; 13 height: 25px; 14 line-height: 25px; 15 background:url(/Themes/Employee/Content/images/ico.png) no-repeat 98% 45% transparent; 16 text-indent: 10px; 17 } 18 .searchInselectW .store-selector .btn-select:hover{ 19 background:#fff; 20 color:#3D3F42; 21 } 22 .btn-select:hover, .cur-select:hover { 23 color:#3D3F42; 24 } 25 .btn-select select { 26 position:absolute; 27 top:0; 28 left:0; 29 height:30px; 30 opacity:0; 31 filter:alpha(opacity=0); 32 } 33 .btn-select select option { 34 text-indent: 10px; 35 } 36 .btn-select select option:hover { 37 color: #fff; 38 }
这个看着比较长，接着简单的jquery
1 $(function(){ 2 $(document).on("change", function() { 3 $("select").each(function() { 4 var $selectText = $(this).children("option:selected").text(); 5 $(this).parent().find("span").text($selectText); 6 }); 7 }); 8 })
说下原理，设置select透明度为0，利用css样式把span美化成select的样式，利用js把select选择的option的值传给span。
目前发现这是最简单的方法，如果大神们有更好的办法欢迎批评指正。
