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

禁断の果実?

伝統的に、 のスタイルを設定していました。要素単独では、ドロップダウン リストのオプションの外観のみが変更され、 要素は変更されません。要素自体。ただし、CSS の最新の進歩により、可能性の新たな境地がもたらされました。

:has() 疑似クラスを入力してください。

:has の両方をサポートするブラウザでは()

の疑似クラスとスタイル設定

select:has(option[selected][value="3"]) {
  background: orange;
}

このコードは、オレンジ色の背景を 要素に適用します。 要素の場合値 '3' が選択されています。

しかし、待ってください!

CSS を使用すると、

を作成することもできます。 onchange イベントを介して選択されたオプションの変更に応答する要素。 の data-chosen 属性を設定することで、

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

ログイン後にコピー

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

ログイン後にコピー

このアプローチでは、

要素の外観を完全に制御できます。選択した に基づく要素とその価値により、幅広いカスタマイズの可能性が可能になります。

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