选择默认的箭头不会隐藏在FF

我想要样式化选择，但我已经在FF和IE8上出现问题。右侧的默认箭头不想消失！选择默认的箭头不会隐藏在FF

我做了一个小提琴：

而这里的代码：

HTML：

<div class="styled-select"> 
      <select name="yearpicker" id="yearpicker"></select> 
      </div>

CSS：

body { 
    background: red 
} 
.styled-select select { 
    -webkit-appearance: none; 
    -moz-appearance: none; 
    appearance: none; 
    text-indent: 0.5px; 
    text-overflow: ''; 
    margin-left: 10px; 
    margin-top: 30px; 
    width: 215px; 
    height: 39px; 
    padding-left:10px; 
    line-height: 1; 
    border: 0; 
    border-radius: 0; 
    color:#B4D234; 
    font-size: 20px; 
    overflow: hidden; 
    background: transparent; 
    background: url('http://www.francescoceccarelli.net/select_arrow.png') no-repeat right #fff; 

} 
select::-ms-expand { 
    display: none; 
}

和JS：

for (i = new Date().getFullYear(); i > 2000; i--) 
{ 
    $('#yearpicker').append($('<option />').val(i).html("Year " + i)); 
}

你能不能给一些建议，好吗？

THX，弗朗切斯科

来源

2014-10-09 frankcecca

您不能在IE8中设置选择框的样式。如果你已经选择了风格化的选择框，那么最好的方法是使用div而不是选择选项，然后使用Javascript来使div像一个选择框一样工作。如果这超出了你的技能水平，那么有一个jQuery插件可以帮你实现[Selectify]（https://github.com/jamesinc/selectify） – APAD1 2014-10-09 17:01:25

这是最新firefox中的一个已知问题。过去有一种通过抵消内容来解决问题的方法：''一点点，你可以在这里了解更多：http://stackoverflow.com/questions/23920990/firefox-30-is-not-hiding-select- box-arrows-any，您可以在这里查看bug ticket：https：//bugzilla.mozilla.org/show_bug.cgi？id = 649849＃c161 – 2014-10-09 17:06:27

看起来像在等待下一个版本 – 2014-10-09 17:06:51

你可以做的是设置-moz-appearance: window这将清除所有默认的造型。然后，您可以将选择内容包装在一个容器中（您已经），并将容器的样式设置为您的选择框，然后在容器的整个高度和宽度内进行选择，以便点击它仍会触发该操作。

JSFIDDLE

来源

2014-10-09 17:17:34 jmore009

选择默认的箭头不会隐藏在FF

回答

相关问题