CSS のみを使用してチェックボックスのラベルを強調表示するにはどうすればよいですか?

CSS を使用してチェックボックスがオンになっているラベルを強調表示する

対応するチェックボックスの状態に基づいてラベルの外観をカスタマイズすることは、Web における一般的な要件です。発達。 JavaScript が解決策を提供しますが、スクリプトを使用せずにこの効果を実現できる巧妙な CSS トリックがあります。

関連するチェックボックスがオンになっているときにラベルを強調表示するには、隣接する兄弟コンビネータ (" ") を利用できます。このコンビネータは、参照要素の直後にある要素を選択し、各チェックボックスの直後のラベルをターゲットにできるようにします。

コード例:

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

この例では、コードでは、:checked 疑似クラスを使用してチェックされたチェックボックスを選択し、「」コンビネータを使用して隣接するラベルをクラスでターゲットにします。 .label-for-check。 font-weight プロパティを太字に設定すると、対応するチェックボックスがオンになったときにラベルが強調表示されます。

HTML 構造:

このコードを使用するには、次の HTML 構造:

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

この単純な CSS テクニックを使用すると、関連付けられたラベルのチェック ステータスを利用してラベルを簡単に強調表示できます。チェックボックスを使用して、よりインタラクティブで視覚的に魅力的なユーザー エクスペリエンスを提供します。

以上がCSS のみを使用してチェックボックスのラベルを強調表示するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。