CSS は選択したオプションに基づいて選択要素のスタイルを設定できますか?

選択したものをスタイルする: 選択したオプションに基づいて CSS で選択をスタイルできますか?

選択要素の外観をカスタマイズすることは可能ですか?現在選択されているオプションに基づいていますか? JavaScript ソリューションが利用できるにもかかわらず、この質問はよく起こります。

不可能への挑戦

<オプション> のスタイル設定要素自体は、あなたが試みたように、オプションリストに存在するときは外観を変更しますが、選択したときは変更しません。現在の技術的な制限により、CSS だけでは選択された要素を直接ターゲットにすることはできません。

Subject Selector to the Rescue?

CSS 4 で提案されている Subject Selector は、将来的に可能性をもたらす可能性があります。ただし、現時点では、この機能は利用できないままです。

:has 擬似クラス

:has 擬似クラスは部分的に役立ちますが、スタイリングに限定されています。オプションが最初に明示的に選択されている場合にのみ、HTML 属性に基づいて選択されます。ユーザーが選択を変更すると、その制限が明らかになり、CSS が依存する HTML 属性に影響を与えることなく DOM プロパティが変更されます。

CSS のみのソリューション

CSS の制限には、賢い解決策が存在します。 onchange イベントに値の割り当てを持つデータ選択属性を導入することで、select 要素に現在のオプションを認識させることができます。これにより、CSS が選択されたオプションに基づいてターゲットとスタイルを設定できるようになります。

<select onchange="this.dataset.chosen = this.value;">
  ...
</select>

select[data-chosen="opt3"] { 
    border: 2px solid red;
}

このエレガントなソリューションにより、CSS は JavaScript を使用せずに、選択されたオプションに基づいて選択要素の外観をカスタマイズできるようになります。

以上がCSS は選択したオプションに基づいて選択要素のスタイルを設定できますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。