CSS のみを使用して、チェックボックスの状態に基づいてラベルのスタイルを設定できますか?

JavaScript を使用せずにチェックボックスのステータスに基づいてラベルをスタイリングする

質問:

は可能ですか?に頼ることなく、対応するチェックボックスのチェック状態に基づいてラベルのスタイルを変更します。 JavaScript?

答え:

はい、CSS で隣接兄弟コンビネータを使用することが可能です。

説明:

隣接兄弟コンビネータ ( ) を利用すると、次の要素をターゲットにすることができます。指定された要素の直後に続きます。この場合、これを使用して、チェックされたチェックボックス (.check-with-label:checked) に隣接するラベル (.label-for-check) のスタイルを設定します。

例:

.check-with-label:checked + .label-for-check {
  font-weight: bold;
}

<div>
  <input type="checkbox" class="check-with-label"><p>この例では、ID「idinput」のチェックボックスをチェックすると、その後に続く「My Label」ラベルが太字になります。これは、ラベルが次の条件を満たしているためです:</p>
<ul>
<li>コンビネータにより、チェックされたチェックボックスに隣接しています。</li>
<li>.label-for-check クラス セレクターと一致します。</li>
</ul>
</div>

以上がCSS のみを使用して、チェックボックスの状態に基づいてラベルのスタイルを設定できますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。