關於safari上的select寬高問題小技，自定義下拉框

以前一直用windows作開發，最近換了個mac，在幾經折騰之下，安裝完了各類開發工具，IDE等，而後欣然打開本身正在開發的網站。忽然發現mac上全部的下拉框都變了，都是默認樣式，不管padding，height都不起做用了，

 

 

而後就去搜博客呀，果真，網上好多朋友都在說這個問題，蘋果也是讓人惱火。

附上一個鏈接

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

 

後來通過蒐集資料，修改，調試在測試，依然無果，macos上的select怎麼都不能修改高度,

 

而後最後我要告訴你們的是，給select添加默認樣式： border-radius: 0; select瞬間變高變漂亮了

 

 

雖然不知道緣由，可是但願可讓你們知道這一小小的修改，能解決這一小問題，而後將就着用也挺好看的。

 

其實中途覺得無解的時候，還寫了個自定義下拉框樣式，仍是給你們分享一下吧

 

 less 代碼

 1 .custom-select {
 2     @lineHeight: 36px;
 3     @border: #119ae8;
 4     display: inline-block;
 5     *display: inline;
 6     *zoom:1;
 7     height: @lineHeight;
 8     width: 100px;
 9     border: 1px solid #d2d2d2;
10     position: relative;
11     line-height: @lineHeight;
12     text-align: center;
13     vertical-align: bottom;
14     margin-right: -4px;
15     background: white;
16     &.show {
17         border: 1px solid @border;
18     }
19     .select-text {
20         display: inline-block;
21         *display: inline;
22         *zoom: 1;
23         position: absolute;
24         top: 0;
25         left: 0;
26         width: 100%;
27         height: @lineHeight;
28         cursor: pointer;
29         cursor: pointer;
30         .text {
31             display: inline-block;
32             height: @lineHeight;
33             width: 80px;
34             margin-right: 20px;
35             line-height: @lineHeight;
36             overflow: hidden;
37         }
38         .arrow {
39             position: absolute;
40             right: 5px;
41             top: 12px;
42             height: 0;
43             width: 0;
44             display: inline-block;
45             *display: inline;
46             *zoom: 1;
47             border: 10px solid transparent;
48             border-top-color: #9e9e9e;
49         }
50     }
51     .select-options {
52         display: none;
53         position: absolute;
54         top: 37px;
55         left: -1px;
56         width: 100%;
57         border: 1px solid @border;
58         border-top:none;
59         background: white;
60         z-index: 1;
61         max-height: 200px;
62         overflow: auto;
63         line-height: @lineHeight - 10;
64         &.show {
65             display: inline-block;
66             *display: inline;
67             *zoom: 1;
68         }
69         .select-option {
70             display: inline-block;
71             height: @lineHeight - 10;
72             color: black;
73             line-height: @lineHeight - 10;
74             width: 100%;
75             cursor: pointer;
76             &:hover {
77                 background: #119ae8;
78                 color:white;
79             }
80         }
81     }
82 }

 

 

而後用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>

　　

 

固然大夥也仍是能夠隨便拿去隨便改，畢竟這是空了閒着隨便寫

 

 

最後來一個效果圖