選択したラジオ ボタンのラベルが CSS でスタイルされないのはなぜですか?

選択したラジオ ボタンのラベルのスタイル設定: トラブルシューティング

選択したラジオ ボタンのラベルをスタイルしようとしていますが、希望するスタイルが適用されていません適用されてないよ。理由を調べて修正しましょう。

あなたの HTML は正しく、提供した CSS にはラジオ入力とそのラベルのスタイルを設定するためのルールが含まれています。問題は、チェックされたラジオ ボタンのセレクターにあります:

.radio-toolbar label + input[type="radio"]:checked {
    background:pink !important;
}

このセレクターは、display:none を使用して非表示になっている input 要素をターゲットとしています。ラジオ ボタンをチェックすると、チェックした属性がラベルではなく入力に追加されます。ラベルのスタイルを設定するには、ラベル要素自体を選択する必要があります:

.radio-toolbar label[for]:checked {
    background: pink !important;
}

ここでは、[for] 属性セレクターを使用して、チェックされたラジオ ボタンに関連付けられたラベルを選択します。更新された CSS は期待どおりに機能するはずです。

ラベルを表示するには、ラベルの表示プロパティも忘れずに含めてください:

.radio-toolbar label {
    ...
    display: inline-block;
    ...
}

以上が選択したラジオ ボタンのラベルが CSS でスタイルされないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。