很多时候我们都会用到一个下拉选择,还有就是重置的功能,今天我们就给大家带来用jquery配合css实现的这个功能。
代码如下:
html
<select> <option value="">select a color..</option> <option value="red">red</option> <option value="green">green</option> <option value="blue">blue</option> </select> <div class="displayselect"> <span class="value"></span> <span class="close">⊗</span> </div>
css
.displayselect{ display:none; border: 1px solid; } select, .displayselect { text-indent:20px; font-family:helvetica; } select, .displayselect{ font-size:22px; height:50px; line-height:50px; width:100%; text-transform:capitalize; } .displayselect .close{ display:block; float:right; width:10%; text-align:center; font-size:52px; cursor:pointer; }
jquery
var select = $('select'); var selectresults = $('.displayselect'); var selectvalue = $('.value', selectresults); var selectclose = $('.close', selectresults); select.on('change', function() { $(this).add(selectresults).toggle(); selectvalue.html(this.value); }); selectclose.click(function(){ select.val('').fadein(); selectresults.toggle(); selectvalue.html(''); });
效果如下:
以上就是本次的效果图片,感谢大家对移动技术网的支持。
如对本文有疑问, 点击进行留言回复!!
selenium + ajax抓取英雄联盟全部英雄的详细信息及多线程保存全部皮肤图片到本地
网友评论