Firefox の 要素のドロップダウン矢印を非表示にする方法

Firefox の

Firefox の要素? " />

Firefox で CSS を使用して 要素のドロップダウン矢印を削除する方法

Chrome と Safari では -webkit-Appearance: button; を使用してドロップダウン矢印を正常に非表示にできましたが、Firefox -moz-Appearance プロパティの実装が異なるため、課題が生じます。

問題: 永続的なデフォルト矢印

-moz-Appearance: button; を 要素に適用すると、デフォルトのドロップダウン矢印はそのまま残り、背景画像にオーバーレイされます。これは、Firefox の 要素がサポートされていないためです。 🎜>

解決策: CSS ハック

Firefox でドロップダウン矢印を非表示にするには、CSS プロパティの組み合わせが必要です。

<code class="css">select {
    -moz-appearance: none;
    text-indent: 0.01px;
    text-overflow: '';
}</code>

-moz-Appearance を none に設定することにより、 0.01px の極小の text-indent を追加すると、矢印がビューの外に押し出されます。 text-overflow: '' は、残りのオーバーフロー テキストを削除し、矢印が非表示のままになるようにします。

Updates:

2014 年 12 月 11 日: -moz-登場: なし。 Firefox 35 では期待どおりに機能するようになり、ハッキングの必要がなくなります。
2014 年 4 月 28 日: 前述の CSS ハックは一時的に効果がありましたが、その後、複数のプラットフォームの Firefox 31.0.a1 Nightly で再登場しました。

以上がFirefox の 要素のドロップダウン矢印を非表示にする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。