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

CSS Selector for Highlighting Checked Radio Button's Label

Question: Can CSS be used to style the label of a checked radio button?

Explanation:

The given HTML markup includes an input type "radio" with an associated label. There is an unsuccessful attempt to bold the label of the checked radio button using "label:checked { font-weight: bold; }".

Solution:

To address the issue, an appropriate CSS selector can be utilized:

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

This selector uses the Adjacent sibling combinator ( ) to specify that the label element should immediately follow the checked radio button input.

How it Works:

When a radio button with the given id is checked, the " " selector ensures that the label with the corresponding "for" attribute is selected and bold. This method ensures that the label is styled regardless of the surrounding markup or additional elements.

Example:

<input>

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

Note: This solution assumes the specified browsers support CSS3 functionality.

The above is the detailed content of How Can I Style a Checked Radio Button's Label with CSS?. For more information, please follow other related articles on the PHP Chinese website!