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

チェックされたラジオ ボタンのラベルを強調表示するための CSS セレクター

質問: CSS を使用して、チェックされたラジオ ボタンのラベルのスタイルを設定できますか?

説明:

指定された HTML マークアップには入力タイプが含まれています「radio」と関連付けられたラベル。 「label:checked { font-weight:bold; }」を使用してチェックされたラジオ ボタンのラベルを太字にしようとしましたが、失敗しました。

解決策:

問題に対処するには、適切な CSS セレクターを利用できます:

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

このセレクターは隣接する兄弟コンビネータ ( ) は、ラベル要素がチェックされたラジオ ボタン入力の直後に続くように指定します。

仕組み:

指定された ID のラジオ ボタンがチェックされると、「 」セレクターによって、対応する「for」属性を持つラベルが選択され、太字になります。このメソッドにより、周囲のマークアップや追加要素に関係なくラベルのスタイルが設定されます。

例:

<input>

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

注: このソリューションは、指定されたブラウザが CSS3 機能をサポートしていることを前提としています。

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