コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > CSSチュートリアル > 本文

Firefox の 要素のドロップダウン矢印を削除する方法

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

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

-moz-Appearance: button; を 要素がサポートされていないためです。 🎜>

解決策: 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 の