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

スタイル <選択>選択した要素に基づく : CSS だけで機能しますか?

問題: のスタイルを設定しようとしています。選択した に基づく要素CSS を使用することは課題であることがわかっています。直接スタイル設定できるオプション要素とは異なり、選択した要素のスタイル設定は依然としてわかりにくいです。

答え:

CSS だけでは

のスタイルを設定するのに十分ではありません。選択した に基づく要素。ただし、onchange イベントとデータ属性の割り当てを含む賢い回避策を使用すると、この待望の機能を実現できます。

解決策:

1. 値の割り当てデータで選択された属性に追加します:
   要素に、データで選択された属性に現在の値を割り当てる onchange イベントを追加します。これにより、選択したオプションの値が CSS で使用できるようになります。
   選択要素をターゲットにする:
   
   をターゲットとする CSS ルールを作成します。データで選択された属性に基づく要素。この例では、opt3 値は、選択されたオプションのスタイルを設定することを目的としています。

   <select onchange=" this.dataset.chosen = this.value; ">
       ...
       ...
   </select><pre class="brush:php;toolbar:false">select[data-chosen='opt3'] { 
       border: 2px solid red;
   }

   ログイン後にコピー
   注: このソリューションは、 に基づく要素は、ブラウザ間で広くサポートされていない可能性があります。

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