類似 select 選擇框效果及美化

網上有各種各樣的關於 select 選擇框的美化，找了很多，並沒有好的樣式效果。所以就找了一個利用 ul li 做的類似 select 選擇框的效果，不廢話了，先上圖，效果如下：

對於上圖的箭頭效果，可以看看我上篇博客 點擊這里

點擊一個 test ，就會把列表顯示出來，再次點擊，列表隱藏，選擇一個 li ，就會把 span 里的內容替換成 li 的內容，然后可以用 js 監控 span 的變化，然后執行你的代碼。效果如下：

 

html 代碼如下：

<div id="type" class="test">
    <span>投資種類</span>
    <ul class="dropdown">
        <li>期貨</li>
        <li>股票</li>
        <li>期權</li>
    </ul>
</div>
<div id="kind" class="test">
    <span>投資類型</span>                        
    <ul class="dropdown">
        <li>趨勢</li>
        <li>震盪</li>
        <li>套利</li>
        <li>選股</li>
        <li>擇時</li>
    </ul>
</div>

 

css 代碼如下：

ul li{
    list-style: none;
}
.test {
    position: relative;
    float: left;
    width: 120px;
    height: 40px;
    padding-left: 11px;
    font-size: 15px;
    line-height: 40px;
    cursor: pointer;
    border: 1px solid #d2d2d2;
    border-radius: 3px;
    margin-right: 20px;
    outline: none;
}
.test:before {
    position: absolute;
    right: 13px;
    top: 18px;
    width: 0;
    height: 0;
    content: "";
    border-width: 8px 8px 0 8px;
    border-style: solid;
    border-color: #d36969 transparent;
    -webkit-transition: transform .25s;
       -moz-transition: transform .25s;
        -ms-transition: transform .25s;
         -o-transition: transform .25s;
            transition: transform .25s;
}
.test:after {
    position: absolute;
    right: 15px;
    top: 18px;
    width: 0;
    height: 0;
    content: "";
    border-width: 6px 6px 0 6px;
    border-style: solid;
    border-color: #fff transparent;
    -webkit-transition: all .25s;
       -moz-transition: all .25s;
        -ms-transition: all .25s;
         -o-transition: all .25s;
            transition: all .25s;
}
.test.active:before{
    -webkit-transform: rotate(180deg);
       -moz-transform: rotate(180deg);
        -ms-transform: rotate(180deg);
         -o-transform: rotate(180deg);
            transform: rotate(180deg); 
}
.test.active:after{
    top: 20px;
    -webkit-transform: rotate(180deg);
       -moz-transform: rotate(180deg);
        -ms-transform: rotate(180deg);
         -o-transform: rotate(180deg);
            transform: rotate(180deg); 
}
.test .dropdown {
    position: absolute;
    right: 0;
    left: 0;
    display: none;
    padding: 0;
    border-radius: inherit;
    border: 1px solid #d2d2d2;
    box-shadow: 2px 2px 5px rgba(0,0,0,.4);
}
.test.active .dropdown {
    display: block;
}
.test .dropdown:before {
    position: absolute;
    right: 13px;
    bottom: 100%;
    width: 0;
    height: 0;
    content: "";
    border-width: 0 8px 8px 8px;
    border-style: solid;
    border-color: #d2d2d2 transparent;
}
.test .dropdown:after {
    position: absolute;
    right: 15px;
    bottom: 100%;
    width: 0;
    height: 0;
    content: "";
    border-width: 0 6px 6px 6px;
    border-style: solid;
    border-color: #fff transparent;
}
.test .dropdown li {
    float: left;
    width: 129px;
    font-size: 14px;
    -webkit-transition: all .3s ease-out;
       -moz-transition: all .3s ease-out;
        -ms-transition: all .3s ease-out;
         -o-transition: all .3s ease-out;
            transition: all .3s ease-out;
    text-align: center;
}
.test .dropdown li:first-of-type {
    border-radius: 3px 3px 0 0;
}
.test .dropdown li:last-of-type {
    border-radius: 0 0 3px 3px;
}
.test .dropdown li:hover {
    color: #fff;
    background: #c43c3d;
}

對於 :before 和 :after 兩個偽元素不理解可以去看看我上篇博客 點擊這里

 

js 代碼如下：

function DropDown(el) {
    this.dd   = el;
    this.span = this.dd.children('span');
    this.li   = this.dd.find('ul.dropdown li');
    this.val  = '';
}
DropDown.prototype.initEvents = function() {
    var obj = this;
    obj.dd.on('click', function(event){
        $(this).toggleClass('active').siblings().removeClass('active');
        event.stopPropagation();
    });
    obj.li.on('click', function() {
        var opt = $(this);
        obj.val = opt.html();
        if (obj.span.html() == obj.val) return;                    
        obj.span.html(obj.val);
        $(document).click(function() {
            $('.test').removeClass('active');
        });
    })
}
var test1 = new DropDown($('#type'));
var test2 = new DropDown($('#kind'));
test1.initEvents();
test2.initEvents()

 

這里使用構造-原型組合模式來創建了一個 DropDown 對象，構造-原型組合模式解釋：屬性寫在構造函數中，是表示每個實例獨有的屬性，讓對象具體化；方法寫在構造函數外，是為了表示每個實例共享的方法。

但是這里有點不好的方法是，已限制了 html 的布局，如果有什么疑問，本人會在評論中一一答復。