Firefoxでselect要素のスタイルを設定する

Question

Firefoxで<select>のスタイルを設定しようとしています。 Chromeの私はそれを作った：

-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

、 "-moz-appearance:none" 必要に応じて、あなたはすでにあなたのコードに書いたことを、最終的には矢印ボタンを削除します。

このバージョン以降にはbugが解決されました。

Answer 2

これはFirefoxのバグです：-moz-appearance：noneにselect要素があります。 詳細については、このバグレポートを参照してください：https://bugzilla.mozilla.org/show_bug.cgi?id=649849は

Answer 3

EDIT [2]：@ keskaのディスプレイに基づいてhttp://jsfiddle.net/sstur/2EZ9f/（：：フレックス修正といくつかのテキストの影の@ジョアン・クーニャのawesome trickがFF30に動作を停止しているので、この新しい回避策を参照してくださいマジック）

編集：ここに示されたように、これは、純粋なCSSを使用して行うことができます。http://jsfiddle.net/sstur/fm5Jt/

これは、クロム、Firefoxの、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/

詳細：Firefoxの35以来https://gist.github.com/joaocunha/6273016