在Firefox中設計選擇元素

Question

我試圖在Firefox中設計<select>。在鉻我做它：

-webkit-appearance: none; 
background: #eeeeee url("../img/select-arrow.jpg") no-repeat center right; 

但在Firefox我不能似乎能夠得到與

-moz-appearance: none; 
background: #eeeeee url("../img/select-arrow.jpg") no-repeat center right; 

任何想法相同的結果？謝謝。

Answer 1

由於火狐35「-moz-appearance:none」你已經在你的代碼中寫道，根據需要最後取出箭頭按鈕。

自從該版本以來，這是一個bug解決。

Answer 2

看起來像這是Firefox的錯誤：-moz-appearance：沒有選擇元素。 更多信息，請參閱此bug報告：https://bugzilla.mozilla.org/show_bug.cgi?id=649849

Answer 3

EDIT [2]：由於@若昂 - 庫尼亞的awesome trick停在FF30的工作，看到這個新的解決方法：http://jsfiddle.net/sstur/2EZ9f/（基於@ keska的顯示屏上：柔性修復和一些文字陰影魔法）

編輯：這可以使用純CSS來完成，這表現在這裏：http://jsfiddle.net/sstur/fm5Jt/

這將是樣式在Chrome，火狐，IE10 +和老IE等舊版瀏覽器將優雅降級。它使用各種供應商特定的解決方法，包括-webkit-appearance: none，正如您所提到的。

Answer 4

您可以嘗試對-moz-appearance屬性使用不同的值。例如 -moz-appearance: toolbox;適合我。

全部值的列表可以在這裏找到：https://developer.mozilla.org/en-US/docs/Web/CSS/-moz-appearance

Answer 5

完全重複，因爲這一個：https://stackoverflow.com/a/18317228/1411163

相同的答案：

只是想出瞭如何從Firefox中選擇箭頭。訣竅是使用-prefix-appearance，text-indent和text-overflow的混合。它是純CSS，不需要額外的標記。

select { 
    -moz-appearance: none; 
    text-indent: 0.01px; 
    text-overflow: ''; 
} 

在Windows 8，Ubuntu和Mac上測試最新版本的Firefox。

活生生的例子：http://jsfiddle.net/joaocunha/RUEbp/1/

更多關於這個問題的：https://gist.github.com/joaocunha/6273016