自定义下拉框

最新推荐文章于 2024-07-15 14:54:09 发布

huangjun_best

最新推荐文章于 2024-07-15 14:54:09 发布

阅读量547

点赞数

分类专栏： JavaScript HTML CSS+DIV

本文链接：https://blog.csdn.net/huangjun_best/article/details/34796447

版权

JavaScript 同时被 3 个专栏收录

11 篇文章 0 订阅

订阅专栏

HTML

9 篇文章 0 订阅

订阅专栏

CSS+DIV

5 篇文章 0 订阅

订阅专栏

原生的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加个下拉图片背景。。