Why Doesn't My CSS Style My Selected Radio Button Label?

Styling Selected Radio Button Labels: Troubleshooting

You're trying to style the label of a selected radio button, but the desired style isn't being applied. Let's examine why and fix it.

Your HTML is correct, and the CSS you've provided includes rules for styling the radio input and its label. The problem lies in the selector for the checked radio button:

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

This selector targets the input element, which is hidden using display:none. When you check a radio button, the checked attribute is added to its input, not to its label. To style the label, you need to select the label element itself:

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

Here, we use a [for] attribute selector to select the label that is associated with a checked radio button. The updated CSS should work as expected.

Remember to also include the display property for the label to make it visible:

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

The above is the detailed content of Why Doesn't My CSS Style My Selected Radio Button Label?. For more information, please follow other related articles on the PHP Chinese website!