ブラウザ間の互換性を実現するために選択要素の矢印をカスタマイズするにはどうすればよいですか?

ブラウザ間の互換性のために選択矢印の外観をカスタマイズする

選択要素の美しさを向上させるために、選択要素を置き換えるのが一般的です。デフォルトの矢印とカスタム画像。ただし、このブラウザ間の互換性を実現するのは難しい場合があります。

この問題に対処するには、次のコードを CSS に組み込むことを検討してください。

.styled-select select {
    -moz-appearance:none; /* Firefox */
    -webkit-appearance:none; /* Safari and Chrome */
    appearance:none;
}

この追加により、デフォルトの矢印の表示が抑制されます。すべての主要なブラウザ。

残念ながら、Firefox はバージョン 35 までこの機能を完全にはサポートしていません。それより前のバージョンでは、回避策が必要です。 jsfiddle の例で示されているそのようなアプローチの 1 つは、元の矢印を非表示にし、select 要素の上にマウスを置いたときに矢印の機能を模倣する背景画像に置き換えることです。

以上がブラウザ間の互換性を実現するために選択要素の矢印をカスタマイズするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。