ホームページ > ウェブフロントエンド > CSSチュートリアル > CSS を使用してチェックされたラジオ ボタンのラベルのスタイルを設定するにはどうすればよいですか?

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

Linda Hamilton
リリース: 2024-12-21 08:19:13
オリジナル
288 人が閲覧しました

How can I style labels of checked radio buttons using CSS?

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

チェックされたラジオ ボタンに関連付けられたラベルに CSS スタイルを適用するタスクは、 CSS セレクター 'input[type="radio"]:checked label`.

説明:

このセレクターの ` 記号は **隣接兄弟コンビネータ**を表します。これにより、チェックされたラジオ ボタン入力の直後にラベルが表示されます。このセレクターを :checked` 疑似クラスと組み合わせることで、チェックされたラジオ ボタン入力に続くラベルがターゲットになります。

たとえば、次のマークアップを考えてみましょう。

<input>
ログイン後にコピー

セレクター ` の使用input[type="radio"]:checked ラベル、次のスタイルを適用できます:

input[type="radio"]:checked+label {
  font-weight: bold;
}
ログイン後にコピー

このスタイルチェックされたラジオ ボタンのラベルは太字になりますが、チェックされていないラジオ ボタンのラベルは変更されません。

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

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート