CSS は「選択された要素に基づいて」要素をスタイル設定できますか?

のスタイル設定選択した要素に基づく

のスタイル設定選択した に基づく要素純粋な CSS では長い間不可能だと思われてきました。 のスタイルを設定できるにもかかわらず、要素に直接適用すると、変更はリスト内のオプションにのみ適用され、選択したオプションには適用されません。

JavaScript ソリューションでは回避策が提供されていますが、CSS は本当にこの要件を満たすことができますか?

「ビールをホールド」解決策

ステップ 1: を更新します。要素の値

onchange イベントを使用して、選択した値を のカスタム データ属性に割り当てます。要素。例:

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

ステップ 2: ターゲットとスタイル

データ属性に保存された選択された値を使用して、 をターゲットにすることができます。 CSS セレクターを使用した要素:

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

実際の例については、この CodePen をチェックしてください: https://codepen.io/Aprillion/pen/xxx

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