自定义下拉框

来源：互联网发布：科学计算 python 编辑：程序博客网时间：2024/06/05 07:57

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

0 0