-3

I have a HTML checkbox, with a <input type="checkbox"> and a <label> like this:

I want to style the label according to the check status of the checkbox element. Is it possible to use pure CSS to do that? How can I do that?

For instance, I want to hide the checkbox dot and use the label style to save some room on the page:

enter image description here

AGamePlayer
  • 7,404
  • 19
  • 62
  • 119

1 Answers1

1

The :checked CSS pseudo-class selector represents any radio / checkbox / option element that is checked or toggled to an ON state.

You might want to read more about it on MDN.

input[type="checkbox"] {
    display: none;
}
input[type="checkbox"]:checked + label {
    font-weight: bold;
    text-decoration: underline;
}
<input id="label1" type="checkbox" name="label"/><label for="label1">Label 1</label><br />
<input id="label2" type="checkbox" name="label"/><label for="label2">Label 2</label>
N3R4ZZuRR0
  • 2,400
  • 4
  • 18
  • 32