CSS を使用して HTML ドロップダウン リストで選択したオプションのスタイルを設定するにはどうすればよいですか?

CSS を使用したドロップダウン リストで選択したオプションのスタイル設定

HTML の選択要素を使用する場合、多くの場合、選択したオプションの外観をカスタマイズする必要があります。これは、チェックボックスやラジオ ボタンの :checked 擬似クラスに似た、CSS :selected 擬似クラスを通じて実現できます。

:selected 擬似クラスは、現在アクティブなオプション要素またはドロップダウン リストに表示されているオプション要素をターゲットとします。 。これにより、選択したオプションに特別にスタイルを適用して、他のオプションと区別することができます。

:checked と類似しているにもかかわらず、:selected 疑似クラスは同じスタイル プロパティを継承しません。特に、カラー プロパティの設定は、すべてのブラウザで常にサポートされているわけではありません。

ただし、次の CSS コードを使用して、選択したオプションを背景色でスタイル設定できます:

option:selected {
  background-color: red;
}

これこのコードは、現在選択されているオプションに赤い背景を適用し、その視認性を高め、ユーザーに視覚的なフィードバックを提供します。

代わりに、:selected を使用することもできます。選択したオプションをドロップダウン リスト自体から非表示にする疑似クラス。これは、より簡潔または合理化されたリストをユーザーに提示する場合に役立ちます。

option:checked {
  display: none;
}

このコードは、選択したオプションを表示リストから削除し、ユーザーは残りのオプションのみに集中できるようにします。

以上がCSS を使用して HTML ドロップダウン リストで選択したオプションのスタイルを設定するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。