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

にスタイルを適用します。選択したオプションに基づく要素: CSS のみのアプローチ

従来、

のスタイルを設定していました。選択されたオプションに基づく要素は JavaScript ソリューションに依存していました。ただし、CSS を使用すると、純粋に CSS を通じてこの効果を実現できるようになりました。

課題: オプション要素のスタイル設定

のスタイルを設定しようとしています。要素は、選択した要素ではなく、オプション リスト内の外観にのみ直接影響します。

select[name="qa_contact"] option[value="3"] {
背景: orange;
}

解決策: onchange の活用イベント

<選択>要素が選択されたオプションを認識しているため、onchange イベントでデータが選択したプロパティに値を割り当てることができます。

さて、 をターゲットにしてスタイルを設定できます。データ選択プロパティに割り当てられた値に基づく要素。

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

このアプローチを使用することで、

にスタイルを適用することができます。

CSS 3 では選択されたオプションに基づいて要素が作成されるため、CSS 4 の件名セレクターなどの更新により、将来この機能が導入される可能性があります。ただし、この機能が実現するかどうかは依然として不透明です。

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