異なるブラウザ間で選択入力の矢印スタイルをカスタマイズするにはどうすればよいですか?

選択入力の矢印スタイルのカスタマイズ

ここでのタスクは、選択入力のデフォルトの矢印画像をカスタム画像に置き換えることです。ただし、このカスタマイズを実装する取り組みは Chrome でのみ成功しています。

提供された HTML および CSS コードには、選択入力と同じ寸法の div 要素の作成とその背景の透明設定が含まれます。目的の矢印の画像が div の右上隅に背景として含まれています。

残念ながら、Firefox と IE9 ではカスタム画像の代わりに元の矢印が表示されます。これに対処するには、次の CSS 変更を利用することを検討してください。

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

このコードを select 要素に適用すると、矢印を含むブラウザのデフォルトのスタイルが削除されます。ただし、Firefox はバージョン 35 までこの機能を完全にはサポートしていないことに注意してください。

別のアプローチとして JavaScript を使用することもできます。回避策は、この jsfiddle で実証されています: https://jsfiddle.net/b5gu6306/

要約すると、選択入力の矢印スタイルをカスタマイズするには、推奨される CSS コードを使用して選択要素の外観を変更します。 Firefox バージョン 35 より前の場合は、提供されている JavaScript 回避策の実装を検討してください。

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