How Can I Highlight Checkbox Labels Using Only CSS?

Highlighting Labels with Checked Checkboxes Using CSS

Customizing the appearance of labels based on the state of their corresponding checkboxes is a common requirement in web development. While JavaScript offers solutions, there's a neat CSS trick that can achieve this effect without any scripting.

To highlight a label when its associated checkbox is checked, we can utilize the adjacent sibling combinator (" "). This combinator selects an element that is immediately after the reference element, allowing us to target the label right after each checkbox.

Example Code:

.check-with-label:checked + .label-for-check {
  font-weight: bold;
}

In this code, we use the :checked pseudo-class to select the checked checkboxes and use the " " combinator to target the adjacent label with the class .label-for-check. By setting the font-weight property to bold, we highlight the label when its corresponding checkbox is checked.

HTML Structure:

To use this code, ensure you have the following HTML structure:

<div>
  <input type="checkbox" class="check-with-label"><p>By using this simple CSS technique, you can easily highlight labels by leveraging the checked status of their associated checkboxes, providing a more interactive and visually appealing user experience.</p>
</div>

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