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

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

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

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

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

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

onchange イベントを使用して、選択した値を

のカスタム データ属性に割り当てます。要素。例:

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

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

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

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

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

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

JavaScript css for select using Attribute Event this https

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：JavaScript でアニメーションの雪の結晶とサンタを使った魔法のクリスマス シーンを作成する方法次の記事：JavaScript でアニメーションの雪の結晶とサンタを使った魔法のクリスマス シーンを作成する方法

関連記事

続きを見る

• CSSを書くときにBorderについて注意すべきことまとめ
• 複数のスタイル選択とスタイルのリアルタイム切り替えを実現する方法_体験交流
• マーキーの詳細な使用状況分析
• CSSタイトル行の実装（行削除効果による行削除）
• CSS3 におけるグレースフル デグラデーションとプログレッシブ エンハンスメントの違い

福祉オンライン PHP トレーニング，PHP 学習者の迅速な成長を支援します！

私たちについて免責事項Sitemap

© php.cn All rights reserved