Firefox で選択ドロップダウン矢印を正しく隠す方法?

選択ドロップダウン矢印非表示の「-moz-Appearance」を修正しています

問題:

カスタマイズしようとしていますChrome と Firefox の両方で CSS を使用した選択要素のドロップダウン矢印。 「-webkit-」構文は Chrome/Safari では問題なく動作しますが、対応する「-moz-」構文は Firefox のドロップダウン矢印を隠しません。 "-moz-外観: なし;"デフォルトの矢印も削除できません。

解決策:

ドロップダウン矢印を削除するための正しい "-moz-Appearance" 値は "-moz-外観: なし;。」ただし、このプロパティは「-moz-Appearance: button;」とともに使用されます。はレガシーコンテンツになりました。 Firefox v35 以降では、改善された「外観」プロパティがサポートされており、よりシンプルなソリューションが可能になります。

<code class="css">select {
  appearance: none;
}</code>

代替ハック (Firefox v35 より前):

Firefox v35 より前は、矢印を非表示にするために CSS ハックが必要でした:

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

このメソッドは矢印をわずかに右にシフトし、オーバーフローを引き起こして矢印を削除します。

更新:

• 2014 年 12 月 11 日: 「-moz-Appearance:none」が Firefox v35 でサポートされるようになりました。
• 2014 年 4 月 28 日: 上記のハッキングは、Firefox 31.0.a1 Nightly で一時的に誤動作しました。ただし、問題は解決されました。

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