選擇默認的箭頭不會隱藏在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

回答

相關問題