模拟select标签

标签：style   blog   http   io   color   ar   os   sp   div   

大家都知道现在select的右边下拉样式通过纯粹css是改变不了的，，但有时我们作为一个前端人员需要做到与UI设计100%相像，就只有自己模拟他了。下面就是我个人常用的模拟select下拉框的代码。

CSS部分：

body,div,span,ul,li{margin: 0;padding: 0;}
.myselect{width: 250px;height: 35px;border: 1px solid #dddddd;margin-left: 10px;}
.show_opt{width: 200px;height: 35px;float: left;line-height: 35px;position:relative}
.b_select{width: 48px;height: 35px;
    outline: none;float: left;background: url("../images/b_sec.png") no-repeat right;}//（）
.moren{display: inline-block;width: 200px;}
.s_ul{width: 250px;height: auto;border: 1px solid #dddddd;
    position: absolute;top: 35px;left: -1px;display: none}
.s_ul li{width: 250px;height: 25px;line-height: 25px;border-bottom:1px solid #dddddd;list-style: none;}
#lastli{border-bottom: 0px;}

HTML部分：
<div class="myselect">
    <div class="show_opt">
        <span class="moren dianji"></span>
        <ul class="s_ul">
            <li>2222</li>
            <li>3333</li>
            <li>4444</li>
            <li>2222</li>
            <li>3333</li>
            <li id="lastli">4444</li>
        </ul>
    </div>
    <div class="b_select dianji"></div>
</div>

JS部分：（我引用了jquery-1.8.3.js）

$(".moren").html( $(".s_ul").children().first().html())/*默认显示第一个li的内容*/
var flag=true;/*控制隐藏不隐藏*/
$(".dianji").on("click",function(){
    if(flag==true){
        $(".s_ul").css({display:"block"})
        $(".s_ul").children().first().css({backgroundColor:"#0085d0"});
        flag=false;
    }else{
        $(".s_ul").css({display:"none"});
        flag=true;
    }
});
$(".s_ul li").hover(function(){
    $(this).css({backgroundColor:"#0085d0"})
},function(){
    $(this).css({backgroundColor:"white"})
});
$(".s_ul li").on("click",function(){
    $(".moren").html($(this).html());
    $(".s_ul").css({display:"none"});
    flag=true;
})

模拟select标签

标签：style   blog   http   io   color   ar   os   sp   div   

原文地址：http://www.cnblogs.com/luoyong/p/4086965.html