先說一下為什么要美化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。
目前發現這是最簡單的方法，如果大神們有更好的辦法歡迎批評指正。