• 彤彤杰作

需要做一個(gè)類似select的下拉 但是樣式有改變 option的hover樣式谷歌瀏覽器不能更改，所以自定義

后期由于需要在頁(yè)面任意地方點(diǎn)擊能夠關(guān)閉彈框，所以添加了遮罩層

下拉框模擬 select中option的背景色改變

.this_select_style{
    display:inline-block; 
    position:relative;
}
.this_select_style input{
    width:260px;
    /*padding: 5px 50px 5px 20px;*/
    padding-left:5px;
    height: 35px;
    border: 1px solid #d8d8d8;
    box-sizing: border-box;
    border-radius: 5px;
    color: #999;
    background: url(../images/Mall_select.png) no-repeat 87% 54%;
}
.this_select_style ul{
    width:260px;
    border: 1px solid #d8d8d8;
    border-top:none;
    border-radius: 0 0 5px 5px;
    color: #999;
    padding:0;
    position:absolute;
    top:19px;
    background-color:#fff;
    z-index:9999;
    display:none;
    box-sizing: border-box;
}
.this_select_style .show_ul{
    border-radius:5px 5px 0 0;
    border-bottom:none;
    background:none;
}
.this_select_style ul li{
    width:100%; 
    padding: 5px 50px 5px 20px;
    cursor:pointer;
    box-sizing: border-box;
}
.this_select_style ul li:hover{
    color:#fff;
    background-color:#1bbc9b;
}
#mask{
    width: 100vw;
    height: 100vh;
    background: rgba(0,0,0,0);//為了測(cè)試，可以加上背景色
    position: fixed;
    left: 0;
    top:0;
    z-index: 999;
    display: none;
}


<div id="mask"></div>
<div class="this_select_style">
    <input type="text" readonly="true" class="selectmenu" style="background-color: #fff;" data-value="-1" value="等待發(fā)貨收貨"/>
    <ul>
        <li data-value="0">全部</li>
        <li data-value="1">待審核</li>
        <li data-value="1">已拒絕</li>
        <li data-value="1">等待發(fā)貨收貨</li>
        <li data-value="1">訂單取消</li>
        <li data-value="1">交易結(jié)束</li>
    </ul>
</div>


//下拉框
 $('body').on('click', '.this_select_style .selectmenu', function () {
        $this = $(this);
        $this.toggleClass("show_ul");
        $this.next().toggle();
        $('#mask').show();
    });
    $('body').on('click', '.this_select_style li', function () {
        $this = $(this);
        var thisInput = $this.parent().siblings("input");
        thisInput.attr("data-value", $this.attr("data-value")).val($this.text()).toggleClass("show_ul");
        $this.parent().hide();
        $('#mask').hide();
    })
    $('body').on('click', function (e) {
        if(!$(e.target).hasClass('selectmenu'))
        {
            $('#mask').hide();
            $('.this_select_style .selectmenu').removeClass("show_ul");
            $('.this_select_style ul').hide();
        }
    })

我叫洱月，我愿意陪你到洱海風(fēng)花雪月，你，看到我了嗎？