原生的select表单样式太过简陋,因此在工作中不得不自定义下拉框,
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>自定义下拉框</title>
<style>
*{ margin:0; padding:0;}
ul,li{ list-style:none;}
.prize_grade{ text-align:center; position:relative; width:320px; margin:0 auto; z-index:50;}
.prize_grade .prize_grade_select{ border:1px solid #f2efef; width:120px; background:#f2efef; color:#906868; padding:3px 10px;}
.prize_grade .prize_grade_msg span{ display:inline-block; vertical-align:middle;}
.prize_grade .prize_grade_msg .residue_num{ color:#535353;}
.prize_grade .prize_select{border:1px solid #f2efef;color:#906868; padding:0 10px; height:20px; line-height:20px; margin:0 10px 0 63px; width:120px; cursor:pointer; background:#f2efef url(../img/selec_my_bg.png) no-repeat 120px 4px;}
.grade_select{ position:absolute; left:115px; top:22px;border:1px solid #f2efef; width:140px; z-index:99; display:none;}
.grade_select li{ background:#f2efef; color:#906868; height:22px; line-height:22px; cursor:pointer;}
</style>
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
</head>
<body style="height:500px">
<div class="prize_grade">
<div class="prize_grade_msg"><span class="prize_select">特等奖</span></div>
<ul class="grade_select">
<li>一等奖</li>
<li>二等奖</li>
<li>三等奖</li>
<li>四等奖</li>
<li>五等奖</li>
</ul>
</div>
<script>
//自定义下拉框
$(".prize_select").bind("click",function(){
var siblings = $(this).parent().siblings(".grade_select");
if(siblings.css("display") == "none"){
siblings.show();
$("body").one("click",function(){
if(siblings.css("display") == "block"){
siblings.hide();
}
});
}else{
siblings.hide();
}
return false;
});
$(".grade_select").on("mouseenter",function(){
$("body").unbind("click");
});
$(".grade_select").on("mouseleave",function(e){
$("body").one("click",function(){
if($(".grade_select").css("display") == "block"){
$(".grade_select").hide();
}
});
});
$(".grade_select li").on("click",function(){
$(this).parent().hide().siblings(".prize_grade_msg").children().text($(this).text());
});
</script>
</body>
</html>
上代码中可以给prize_select加个下拉图片背景。。