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.
