select下拉框美化
一、對select進行的簡單封裝
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>select下拉框美化</title>
<script src="/jquery/jquery-1.10.2.js"></script>
<style>
*{margin: 0;padding: 0;}
li{list-style: none;}
.sewvmain{width:1000px;margin:50px auto;text-align: ;}
.sewv{position: relative;width: 100px;display: inline-block;vertical-align: middle;}
.sewvtop{width:100%;height:23px;border: 1px #D9D9D9 solid;cursor:pointer;border-radius: 2px;overflow: hidden;}
.sewvtop:hover{border:1px #57c5f7 solid;}
.sewvtop>span{float:left;width:70%;height:23px;white-space:pre;text-overflow:ellipsis;overflow: hidden;font-size: 12px;line-height:22px;color: #666;padding:0
5px;vertical-align: middle;}
.sewvtop>em{float:right;width: 20px;height: 20px;vertical-align: middle;}
.sewvbm{width: 100%;position: absolute;left: 0;top: 25px;display: none;border: 1px #D9D9D9 solid;border-radius: 2px;}
.sewvbm>li{cursor:pointer;width:100%;height:20px;line-height:20px;font-size: 12px;color: #666;padding-left:5px;}
.sewvbm>li:hover{background: #57c5f7;color: #fff;}
.lbaxztop{animation: rotatete 0.3s linear forwards;}
.lbaxztop2{animation: rotatete2 0.3s linear forwards;}
@keyframes rotatete{
from{transform: rotate(0deg);}
to{transform: rotate(180deg);}
}
@keyframes rotatete{
from{transform: rotate(0deg);}
to{transform: rotate(180deg);}
}
@-moz-keyframes rotatete2{
from{transform: rotate(180deg);}
to{transform: rotate(0deg);}
}
@keyframes rotatete2{
from{transform: rotate(180deg);}
to{transform: rotate(0deg);}
}
</style>
<script>
$(document).ready(function(){
//子導航展開收縮
$(".sewvtop").click(function(){
$(this).find("em").removeClass("lbaxztop2").addClass("lbaxztop").parents(".sewv").siblings().children(".sewvtop").find("em").removeClass
("lbaxztop").addClass(".lbaxztop2");
$(this).next(".sewvbm").toggle().parents(".sewv").siblings().find(".sewvbm").hide();
});
/*滑鼠離開下拉框關閉*/
$(".sewv").mouseleave(function(){
$(".sewvbm").hide();
$(this).children(".sewvtop").find("em").addClass("lbaxztop2");
});
//賦值
$(".sewvbm>li").click(function(){
var selva=$(this).text();
$(this).parents(".sewvbm").siblings(".sewvtop").find("span").text(selva);
$(this).parent("ul").hide();
$(this).parents(".sewv").children(".sewvtop").find("em").addClass("lbaxztop2");
});
});
</script>
</head>
<body>
<div class="sewvmain">
<div class="sewv">
<div class="sewvtop"><span>請選擇..</span><em><img src="image/selebom.png"></em></div>
<ul class="sewvbm">
<li>文字a1</li>
<li>文字b</li>
<li>文字c</li>
<li>文字d</li>
<li>文字e</li>
</ul>
</div>
<div class="sewv">
<div class="sewvtop"><span>請選擇..</span><em><img src="image/selebom.png"></em></div>
<ul class="sewvbm">
<li>文字a2</li>
<li>文字b</li>
<li>文字c</li>
<li>文字d</li>
<li>文字e</li>
</ul>
</div>
<div class="sewv">
<div class="sewvtop"><span>請選擇..</span><em><img src="image/selebom.png"></em></div>
<ul class="sewvbm">
<li>文字a3</li>
<li>文字b</li>
<li>文字c</li>
<li>文字d</li>
<li>文字e</li>
</ul>
</div>
</div>
</body>
</html>
二、效果圖
