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

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

Barbara Streisand
リリース: 2024-12-29 00:20:13
オリジナル
789 人が閲覧しました

How to Style a Checked Radio Button's Label with CSS?

チェックされたラジオ ボタンにラベルを付けるための CSS セレクター

質問が生じます: CSS を使用して、チェックされたラジオ ボタンに関連付けられたラベルのスタイルを設定することは可能ですか? ?期待にもかかわらず、セレクター "label:checked" は望ましい結果を生成できません。

実行可能な解決策は、隣接する兄弟コンビネータ " " を使用することです。このコンビネータは、共通の親を共有する 2 つのセレクタのシーケンスをリンクし、最初のセレクタの直後に 2 番目のセレクタが続きます。

たとえば、セレクタ「input[type="radio"]:checked label」は、直接ラベルをターゲットにします。 HTML 内の位置に関係なく、チェックされたラジオ入力に従います。

例:

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

HTML:

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

このアプローチでは、ラベルを効果的に太字にします。チェックされていないボタンのラベルは影響を受けずに、チェックされたラジオ ボタンがオンになります。

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

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