慕的地10843
下拉菜单的默认样式在不同类型的浏览器中显示的效果非常不同，单纯的用css来统一样式可能非常有局限性，使用Jquery+css优化起来不但简单，而且实用性也非常广，主要原理为设置select透明度为0，利用css样式把span美化成select的样式，利用jquery把select选择的option的值传给span。下面就是jquery优化下拉菜单效果的具体实现代码：Html<pre t="code" l="html"><a class="btn-select"><span class="cur-select">请选择</span><select class="form-control"><option>这是IE浏览器下的默认显示效果</option><option>这是Firefox浏览器下的默认显示效果</option><option>这是Opera浏览器下的默认显示效果</option><option>这是chrome浏览器下的默认显示效果</option></select></a>CSS<pre t="code" l="css">.btn-select {position: relative;display: block;height:30px;line-height: 30px;border:1px solid #ccc;color:#3D3F42;}.btn-select .cur-select {position: absolute;display: block;width: 100%;height: 25px;line-height: 25px;background:url(/Themes/Employee/Content/images/ico.png) no-repeat 98% 45% transparent;text-indent: 10px;}.searchInselectW .store-selector .btn-select:hover{background:#fff;color:#3D3F42;}.btn-select:hover, .cur-select:hover {color:#3D3F42;}.btn-select select {position:absolute;top:0;left:0;height:30px;opacity:0;filter:alpha(opacity=0);}.btn-select select option {text-indent: 10px;}.btn-select select option:hover {color: #fff;}Jquery<pre t="code" l="js">$(function(){$(document).on("change", function() {$("select").each(function() {var $selectText = $(this).children("option:selected").text();$(this).parent().find("span").text($selectText);});});}