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

Styling Labels of Checked Radio Buttons with CSS

The task of applying CSS styles to labels associated with checked radio buttons can be accomplished using the CSS selector 'input[type="radio"]:checked label`.

Explanation:

The ` symbol in this selector represents the **Adjacent Sibling Combinator**. It ensures that the label appears immediately after the checked radio button input. By combining this selector with the :checked` pseudo-class, it targets labels that follow checked radio button inputs.

For example, consider the following markup:

<input>

Using the selector `input[type="radio"]:checked label, you can apply the following style:

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

This style will make the label of the checked radio button bold, while leaving the labels of unchecked radio buttons unchanged.

The above is the detailed content of How can I style labels of checked radio buttons using CSS?. For more information, please follow other related articles on the PHP Chinese website!