How Can I Style Checked Radio Button Labels Using Only CSS?

Styling Checked Radio Button Labels

In CSS, it is possible to apply styles to labels associated with checked radio buttons, even without using additional elements like divs.

The Adjacent Sibling Combinator

To target a label that follows a checked radio button input immediately, use the CSS adjacent sibling combinator ( ). This combinator matches labels that are adjacent to and follow a specific element.

Syntax:

input[type="radio"]:checked + label {
  /* Styles */
}

Example:

Consider the following HTML markup:

<input>

Using the adjacent sibling combinator, you can style the label of the checked radio button as follows:

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

Result:

After selecting a radio button, the corresponding label will become bold, indicating its checked state. This technique can be used with various CSS properties to customize the appearance of checked radio buttons.

The above is the detailed content of How Can I Style Checked Radio Button Labels Using Only CSS?. For more information, please follow other related articles on the PHP Chinese website!