SCSS : change element style if child input is checked or not

Question

I have never used SCSS before and I would liketo know if it would allow me to style an element depending if the checkbox located inside is checked or not.

For instance, I have :

<label>
  <input type="checkbox"/>
</label>

and I would liketo change the content of label::before depending if the box is checked or not.

Does SCSS allows things like this ? If yes,how can I do it ?

The reason that led me to consider SCSS to execute this is that (if I'm not mistaking) it is indeed possible with SASS.
However since I am not familiar with SASS I'd ratherdo it with SCSS, as converting my file is apparently very easy.

Answer 1

I did a little change in your HTML, but I think it can really help you.

Sass code:

input[type=checkbox]
  + .checkbox-label
    color: blue
  &:checked + .checkbox-label
    color: red
    &:before
      content: ""
      border: 1px solid #a3adb3

input[type=checkbox]+.checkbox-label {
  color: blue;
}

input[type=checkbox]:checked+.checkbox-label {
  color: red;
}

input[type=checkbox]:checked+.checkbox-label:before {
  content: "";
  border: 1px solid #a3adb3;
}

<input type="checkbox" id="cbox1" value="first_checkbox">
<label for="cbox1" class="checkbox-label">Hello world</label>

I have helped you in some way.