下拉菜單的默認樣式在不同類型的瀏覽器中顯示的效果非常不同，單純的用css來統(tǒng)一樣式可能非常有局限性，使用Jquery+css優(yōu)化起來不但簡單，而且實用性也非常廣，主要原理為設(shè)置select透明度為0，利用css樣式把span美化成select的樣式，利用jquery把select選擇的option的值傳給span。下面就是jquery優(yōu)化下拉菜單效果的具體實現(xiàn)代碼：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);
});
});
}

這個功能需要根據(jù)下拉框內(nèi)容來判斷，具體代碼如下：
<span class="[field:自定義字段名 addfields='自定義字段名' channelid='自定義字段內(nèi)容模型id' runphp='yes']if(@me=='自定義字段對應值1 比如：已完結(jié)')@me='emd-ico';if(@me=='自定義字段對應值2 比如：未完結(jié)')@me='wei-ico';[/field:自定義字段名]">[field:zczt/]</span>
本人測試成功，我這段代碼是放在{dede:list}{/dede:list}里面的 具體用哪個標簽根據(jù)自己需要 只是提供一種解決思路