3 回答
![?](http://img1.sycdn.imooc.com/5333a1a90001c8d802000200-100-100.jpg)
TA贡献1785条经验 获得超8个赞
下拉菜单的默认样式在不同类型的浏览器中显示的效果非常不同,单纯的用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);
});
});
}
![?](http://img1.sycdn.imooc.com/5333a1660001394602000200-100-100.jpg)
TA贡献1862条经验 获得超6个赞
这个功能需要根据下拉框内容来判断,具体代码如下:
<span class="[field:自定义字段名 addfields='自定义字段名' channelid='自定义字段内容模型id' runphp='yes']if(@me=='自定义字段对应值1 比如:已完结')@me='emd-ico';if(@me=='自定义字段对应值2 比如:未完结')@me='wei-ico';[/field:自定义字段名]">[field:zczt/]</span>
本人测试成功,我这段代码是放在{dede:list}{/dede:list}里面的 具体用哪个标签根据自己需要 只是提供一种解决思路
- 3 回答
- 0 关注
- 990 浏览
相关问题推荐
添加回答
举报