11

この回答に従ってhttps://stackoverflow.com/a/17713753/407943

同じソリューションを実装しようとしましたが、Windows 7 Firefox 22 では機能しません。次のようになります。

ここに画像の説明を入力

select {
    -moz-appearance: window;
    -webkit-appearance: none;
    background: #f5f5f5 url("/images/arrow_down.png") right center no-repeat;
    padding-right: 20px;
}
@-moz-document url-prefix() {
.wrapper {
     background: #f5f5f5 url("/images/arrow_down.png") right center no-repeat;
     padding-right: 20px;
  }
}

編集: ここに jsfiddle がありますhttp://jsfiddle.net/TGBEZ/1/

4

5 に答える 5

33

更新:このトリックは FF 30 で機能しなくなりました。これまでのところ、他の修正はありません。アップデートの完全な要点に注目してください。

<select>Firefox で矢印を削除する方法:

-moz-appearance:none;それ自体では機能しません。と を追加する必要がありtext-indentますtext-overflow。このような：

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

実際の例: http://jsfiddle.net/joaounha/RUEbp/1/

この要旨の詳細については、https ://gist.github.com/joaocunha/6273016 をご覧ください。

于 2013-08-24T11:55:09.877 に答える
1

これは、Firefox の既知のバグであり、すぐには修正されません。

純粋な CSS/HTML 回避策があります:

HTML :

<div class="styled">
    <select></select>
</div>

CSS :

div.styled {
    overflow: hidden;
    padding: 0;
    margin: 0;
}

div.styled select {
    width: 115%;
    background-color: rgba(0, 0, 0, 0);
    background-image: none;
    -webkit-appearance: none;
    border: none;
}

フィドル

ここでの問題は、テキストが大きすぎないようにする必要があることです。そうしないと、画像を超えてしまいます。

また、javascript ソリューションもあります。独自の選択を簡単に作成するための jQuery プラグインであるcustomselectをご覧ください。

別の有名なプラグイン:選択済み

于 2013-07-22T09:31:50.690 に答える
0

-moz-appearance: window の代わりに none を使用すると、FF 30 で動作するようになりました

于 2014-07-01T15:44:20.837 に答える
0

これは、FF/IE/Chrome で実際に機能した唯一のソリューションです。

カスタマイズされた選択ドロップダウン矢印をクリックできない

于 2013-07-23T13:45:34.287 に答える
0

私はこれをFirefox 30+で次のように動作させています:

-moz-appearance: テキストフィールド;

于 2015-04-22T11:48:12.213 に答える