How to highlight the label if the checkbox is checked with CSS?

Spread the love

Sometimes, we want to highlight the label if the checkbox is checked with CSS

In this arrticle, we’ll look at how to highlight the label if the checkbox is checked with CSS.

How to highlight the label if the checkbox is checked with CSS?

To highlight the label if the checkbox is checked with CSS, we can use the sibling selector.

For instance, we write

<div>
  <input type="checkbox" class="check-with-label" id="idinput" />
  <label class="label-for-check" for="idinput">My Label</label>
</div>

to add the input and label elements.

Then we write

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

to use the .check-with-label:checked + .label-for-check selector to select the checked checkbox’s sibling label element with +.

If it’s checked, then the label is bold.

Conclusion

To highlight the label if the checkbox is checked with CSS, we can use the sibling selector.

Leave a Reply

Your email address will not be published. Required fields are marked *