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>

二、效果图

猜你喜欢