CSS のみを使用してチェックされたラジオ ボタン ラベルのスタイルを設定するにはどうすればよいですか?

チェックされたラジオ ボタンのラベルのスタイル設定

CSS では、追加を使用しなくても、チェックされたラジオ ボタンに関連付けられたラベルにスタイルを適用できます。 div のような要素。

隣接する兄弟コンビネータ

チェックされたラジオ ボタン入力の直後にあるラベルをターゲットにするには、CSS の隣接兄弟コンビネータ ( ) を使用します。このコンビネータは、特定の要素に隣接する、または特定の要素に続くラベルと一致します。

構文:

input[type="radio"]:checked + label {
  /* Styles */
}

例:

次のHTMLを考えてみましょうマークアップ:

<input>

隣接兄弟コンビネータを使用すると、次のようにチェックされたラジオ ボタンのラベルのスタイルを設定できます:

input[type="radio"]:checked + label {
  font-weight: bold;
}

結果:

ラジオ ボタンを選択すると、対応するラベルが太字になり、チェックされた状態が示されます。この手法をさまざまな CSS プロパティで使用して、チェックされたラジオ ボタンの外観をカスタマイズできます。

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