ブラウザ間の互換性を維持しながら、CSS を使用して要素をスタイル設定するにはどうすればよいですか?

スタイリング <オプション> CSS を使用した要素: ブラウザ間の互換性

のスタイル設定 内の要素CSS のみを使用する要素は、ブラウザ間の互換性の問題により困難になる可能性があります。ただし、望ましい結果を達成するために使用できるテクニックがいくつかあります。

WebKit と Firefox (Appearance Property)

Firefox 35 以降、WebKit ブラウザと Firefox ブラウザは両方とも使用できます。外観プロパティを使用して、

のデフォルトのスタイルを削除できるようにします。要素。外観プロパティを none に設定すると、ドロップダウン ボタンを非表示にし、オプションのカスタム スタイルを作成できます。

select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

IE 11 (::-ms-expand)

IE 11 との互換性のために、::-ms-expand 疑似要素を使用してデフォルトのドロップダウンを非表示にすることができます

select::-ms-expand {
  display: none;
}

古いソリューション (JavaScript を使用)

Appearance プロパティが導入される前は、 のスタイルを設定する方法がありませんでした。純粋な CSS を使用した要素。回避策として、JavaScript ライブラリを使用して、 の外観を模倣したカスタム ドロップダウン メニューを作成できます。

そのような JavaScript ライブラリの 1 つは jQuery で、selectmenu プラグインを提供します。

$("select").selectmenu();

このプラグインを使用すると、CSS を使用してスタイル設定できるカスタム ドロップダウンを作成できます。

注:

を使用することに注意することが重要です。 をスタイルするための JavaScriptこれらの要素は、スクリーン リーダーやその他の支援技術に依存しているユーザーのアクセシビリティに影響を与える可能性があります。したがって、可能な限り、Appearance プロパティを使用することをお勧めします。

以上がブラウザ間の互換性を維持しながら、CSS を使用して要素をスタイル設定するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。