修改option的宽高无效，用div+ul做select下拉菜单

Posted 2020-08-09 finn_Reo

有时候设计稿的option选项的宽高都不是默认尺寸，想要修改宽高，用padding或者margin都没有用，所以就用div+ul+jq实现。

html

<div id="city">
            <p class="title">查找新世界城市活动信息</p>
            <p>每个城市的有不同的活动信息，请自主查询您所需要了解的城市</p>
            
            <form action="" method="post">
                <div class="country">
                    <ul>
                        <li class="active">中国</li>
                        <li>美国</li>
                        <li>英国</li>
                        <li>法国</li>
                    </ul>
                </div>
                <div class="status">
                    <ul>
                        <li class="active">省份</li>
                        <li>北京</li>
                        <li>广东</li>
                        <li>贵州</li>
                    </ul>
                </div>
                <div class="city">
                    <ul>
                        <li class="active">城市</li>
                        <li>杭州</li>
                        <li>苏州</li>
                        <li>兰州</li>
                    </ul>
                </div>
                <input type="submit" value="搜&nbsp&nbsp&nbsp索"/>
            </form>
</div>

css

#city{
    height: 340px;
    background: url(../img/img_30.png) no-repeat top left;
    padding-top: 52px;
}

#city .title{
    font-size: 21px;
    opacity: 1;
    
    -line-height: 40px;
}
#city .title:after{
    content: "——";
    display: block;
    -line-height: 40px;
}
#city p{
    color: #FFFFFF;
    font-family: "microsoft yahei";
    text-align: center;
    opacity: 0.8;
}

#city form{
    width: 100%;
    height: 168px;
    margin-top: 52px;
    padding: 0 0 0 126px;
}

#city form div, #city form input{
    width: 236px;
    height: 34px;
    float: left;
}

#city form div{
    margin-right: 28px;
    border: none;
      color: #a8aaaa;
      font-size: 12px;
      background-color: #FFFFFF;
}

#city form div:hover{
    border: 1px solid #E74F4D;
}

#city form ul li{
    width: 236px;
    height: 34px;
    line-height: 34px;
    font-size: 12px;
    color: #323333;
    opacity: 0.7;
    display: none;
    background-color: #e3e3e5;
    text-indent: 12px;
    font-size: 12px;
    color: #323333;
}

#city form ul li.active{
    display: block;
    background: url(../img/images/task_1_7_1_03.png) no-repeat;
      background-position: 95% 50%;
      opacity: 1;
      background-color: white;
}

#city form ul li:hover{
    background-color: #E74F4D;
    color: #FFFFFF;
}


#city form input{
    background-color: #E74F4D;
    border: none;
    font-size: 14px;
    color: white;
    font-family: "microsoft yahei";
}

框架样式如下

 

比默认的样式好看吧？

为了完全实现select的效果，需要用到jq+事件委托：

jq

$(document).ready(function(){
    
    var oCityDiv = $("#city").find("div");
    
    oCityDiv.mouseover(function(ev){
        var ev = ev || window.event;
        var target = ev.target || ev.srcElement;
        var _this = $(this);//养成良好习惯，区分this的对象
        
        if(target.nodeName.toLowerCase() == ‘li‘){
            _this.find(‘li‘).css(‘display‘,‘block‘);
            _this.find(‘li‘).click(function(){
                var _li = $(this);
                var iCur = _li.text();
                _this.find(‘.active‘).text(iCur);
            });
        }
        
        _this.mouseout(function(ev){
            var ev = ev || window.event;
            var target = ev.target || ev.srcElement;
            
            if(target.nodeName.toLowerCase() == ‘li‘){
            _this.find(‘li‘).not(‘.active‘).css(‘display‘,‘none‘);
        }
        });
        
    });
});