之前一直用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>
当然大伙也还是可以随便拿去随便改，毕竟这是空了闲着随便写
最后来一个效果图
