umtheme 对于前端开发者来说，应该都知道默认的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下拉列表样式。
