关于safari上的select宽高问题小技，自定义下拉框

之前一直用windows做开发，最近换了个mac，在几经折腾之下，安装完了各种开发工具，IDE等，然后欣然打开自己正在开发的网站。突然发现mac上所有的下拉框都变了，都是默认样式，无论padding，height都不起作用了，

 

 

然后就去搜博客呀，果然，网上好多朋友都在说这个问题，苹果也是让人恼火。

附上一个连接

http://blog.csdn.net/liushuwei0224/article/details/8554995

 

后来经过搜集资料，修改，调试在测试，依然无果，macos上的select怎么都不能修改高度,

 

然后最后我要告诉大家的是，给select添加默认样式： border-radius: 0; select瞬间变高变漂亮了

 

 

虽然不知道原因，但是希望可以让大家知道这一小小的修改，能解决这一小问题，然后将就着用也挺好看的。

 

其实中途以为无解的时候，还写了个自定义下拉框样式，还是给大家分享一下吧

 

 less 代码

.custom-select {
    @lineHeight: 36px;
    @border: #119ae8;
    display: inline-block;
    *display: inline;
    *zoom:1;
    height: @lineHeight;
    width: 100px;
    border: 1px solid #d2d2d2;
    position: relative;
    line-height: @lineHeight;
    text-align: center;
    vertical-align: bottom;
    margin-right: -4px;
    background: white;
    &.show {
        border: 1px solid @border;
    }
    .select-text {
        display: inline-block;
        *display: inline;
        *zoom: 1;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: @lineHeight;
        cursor: pointer;
        cursor: pointer;
        .text {
            display: inline-block;
            height: @lineHeight;
            width: 80px;
            margin-right: 20px;
            line-height: @lineHeight;
            overflow: hidden;
        }
        .arrow {
            position: absolute;
            right: 5px;
            top: 12px;
            height: 0;
            width: 0;
            display: inline-block;
            *display: inline;
            *zoom: 1;
            border: 10px solid transparent;
            border-top-color: #9e9e9e;
        }
    }
    .select-options {
        display: none;
        position: absolute;
        top: 37px;
        left: -1px;
        width: 100%;
        border: 1px solid @border;
        border-top:none;
        background: white;
        z-index: 1;
        max-height: 200px;
        overflow: auto;
        line-height: @lineHeight - 10;
        &.show {
            display: inline-block;
            *display: inline;
            *zoom: 1;
        }
        .select-option {
            display: inline-block;
            height: @lineHeight - 10;
            color: black;
            line-height: @lineHeight - 10;
            width: 100%;
            cursor: pointer;
            &:hover {
                background: #119ae8;
                color:white;
            }
        }
    }
}

 

 

然后用js控制一下点击事件的逻辑

		var select = $('.custom-select');
		var optionsContainer = select.find('.select-options');
		var selectText = select.find('.select-text');
		selectText.find('.text').text('语言方向');
		
		var optionsList = ['test']; // 列表信息从本地固定或者从网络抓取
　　　　　　　　　 optionsContainer.find('.select-option').remove();
　　　　　　　　　 $(optionsList).each(function(index, el){
　　　　　　　　　　　 optionsContainer.append($('<span class="select-option" lang="'+ el +'">'+langMap[el]+'</span>'));
　　　　　　　　　 }		

　　　　　　　　　 optionsContainer.find('.select-option').click(function(e){
　　　　　　　　　　　　selectText.find('.text').text($(this).text());
　　　　　　　　　　　　optionsContainer.removeClass('show');
　　　　　　　　　　　　select.removeClass('show');
　　　　　　　　　 });

		var selectOptionTimer;
		optionsContainer.hover(function(){
			// 鼠标进入选择项区域，停止关闭定时器
			clearTimeout(selectOptionTimer);
		}, function(){
			// 鼠标离开选择区域，停止定时器，并关闭选择区域
			clearTimeout(selectOptionTimer);
			optionsContainer.removeClass('show');
			select.removeClass('show');
		});

		selectText.click(function(){
			// 如果当前下拉框是打开状态，则关闭
			if(optionsContainer.hasClass('show')) {
				optionsContainer.removeClass('show');
				select.removeClass('show');
			} else {
				// 如果当前不是打开状态，先关闭其他所有下拉列表
				$('.custom-select .select-options').removeClass('show');
				clearTimeout(selectOptionTimer);

				// 然后再现实当前下拉列表
				optionsContainer.addClass('show');
				select.addClass('show');
				// 如果显示，需要在一定时间之内关闭
				selectOptionTimer = setTimeout(function(){
					optionsContainer.removeClass('show');
					select.removeClass('show');
				}, 5*1000);
			}
		});

　　

 最后在页面添加对应的元素就OK了

<span class="custom-select">
    <span class="select-text">
        <span class="text"></span>
        <span class="arrow"></span>
    </span>
    <span class="select-options">
        ## will rendered by js 
        ## span.select-option
    </span>
</span>

　　

 

当然大伙也还是可以随便拿去随便改，毕竟这是空了闲着随便写

 

 

最后来一个效果图