CSS だけで、関連付けられたチェックボックスの状態に基づいてラベルのスタイルを設定できますか?

JavaScript を使用せずにチェックボックスの状態に基づいてラベルの外観を変更する

CSS を利用して状態に基づいてラベルの外観を制御できますか - チェック済みまたは未チェック - それに関連するcheckbox?

アプローチ:

JavaScript を使用せずにこの変更を実現するには、CSS の隣接兄弟コンビネータを利用できます。チェックされたチェックボックス要素に隣接するラベル要素を対象とする CSS ルールを定義すると、チェックボックスがチェックされた状態にあるときに特定のスタイルの変更を適用できます。

コード例:

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

このコード スニペットでは、CSS ルールは、チェック状態の「check-with-label」というクラス名を持つ入力要素を対象としています。 「 」隣接兄弟コンビネータは、チェックされたチェックボックスに続く「label-for-check」というクラス名を持つラベルを選択するために使用されます。

「check-with-label」チェックボックスがチェックされている場合、 「label-for-check」には、指定されたスタイルの変更が適用され、この場合、フォントの太さが太くなります。

例マークアップ:

<div>
  <input type="checkbox" class="check-with-label">

結論:

CSS で隣接兄弟コンビネータを使用すると、状態に応じてラベルの外観を変更する一貫した方法が提供されます。付随するチェックボックス要素を削除することで、この特定のシナリオでは JavaScript が不要になります。

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