对于前端开发者来说,应该都知道默认的select下拉列表比较难看,而且在各个浏览器中select下拉框呈现的默认样式都不一样,尤其是在ie浏览器中,要想把它定义成自己喜欢的样式,简直拿它没什么办法,css兼容性差,简直low爆了。所以我们就可以通过div来模拟下拉框,可以通过样式让它定义成自己想要的样子。第一步:先搭建好结构添加css及html代码1,添加c...
对于前端开发者来说,应该都知道默认的select下拉列表比较难看,而且在各个浏览器中select下拉框呈现的默认样式都不一样,尤其是在ie浏览器中,要想把它定义成自己喜欢的样式,简直拿它没什么办法,css兼容性差,简直low爆了。所以我们就可以通过div来模拟下拉框,可以通过样式让它定义成自己想要的样子。
第一步:先搭建好结构添加css及html代码
1,添加css样式代码
h1,h2{font-weight:normal;color:#0CC;clear:both} ul{margin:0;padding:0;list-style:none} .box{width:1000px;margin:0 auto} .box h1{text-align:center;font-weight:normal} .selectBox{width:200px;height:36px;border:1px solid #3CF;position:relative;float:left;margin-right:50px} .selectBox span{display:inline-block;width:200px;height:36px;line-height:36px;cursor:pointer;text-indent:10px} .selectBox .in{color:#C36} .selectBox ul{width:200px;position:absolute;top:36px;left:-1px;border:1px solid #3CF;display:none;background:#fff} .selectBox li{cursor:pointer;line-height:36px;text-indent:10px} .selectBox li:hover{background:#39F;color:#fff} .selectBox font{position:absolute;right:10px;font-size:26px;font-family:"微软雅黑";color:#3CF;transform:rotate(90deg)}
2,添加html代码
<div class="box"> <h1>select美化</h1> <div class="selectBox"> <font>›</font> <span>选项1</span> <ul> <li>选项1</li> <li>选项2</li> <li>选项3</li> </ul> </div> <div class="selectBox"> <font>›</font> <span>选项一</span> <ul> <li>选项一</li> <li>选项二</li> <li>选项三</li> </ul> </div> </div>
第二步:构建交互触发效果,添加Jquery代码
$(function(){ var s_title=$(".selectBox span"); var s_select=$(".selectBox li"); s_title.click(function(e){ $(this).addClass("in"); $(this).next("ul").show(); e.stopPropagation(); }); s_select.click(function(){ var s_text=$(this).html(); var s_title_2=$(this).parent('ul').prev("span"); s_title_2.html(s_text).removeClass("in"); $(this).parent('ul').hide(); }); $(document).click(function(){ s_title.removeClass("in"); $(".select_box ul").hide(); }); });
通过以上代码就可以实现模拟select下拉列表样式。