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.

Possible duplicate of [CSS selector for a checked radio button's label](http://stackoverflow.com/questions/1431726/css-selector-for-a-checked-radio-buttons-label) — steveax, Oct 19 '16 at 00:13
This is about targeting a label outside the target element, am actually trying to target the parent element, so this unfortunately doesn't apply to my situation. — QiMath, Oct 19 '16 at 00:17
Sure, but a minor restructuring of the HTML would allow you to target the label. — steveax, Oct 19 '16 at 00:40

score 11 · Answer 1 · answered Oct 19 '16 at 00:36

11

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.

answered Oct 19 '16 at 00:36

Leonardo Costa

460
2
12

Oh shit, I stand corrected! :) I always forget about sibling selectors, damn. – CourtDemone Oct 19 '16 at 00:44
Don't worry. The important thing is always the exchange of knowledge @CourtDemone :) – Leonardo Costa Oct 19 '16 at 00:50
1

Yes indeed that would work ! I haven't decided switchingto sass yet, but I am considering it to implement this type of behaviour without JS. Thanks – QiMath Oct 19 '16 at 20:49

darrylyeo · Accepted Answer · 2023-06-12T19:32:37.530

No, there is no CSS selector that allows one to style an element based on the state of its children.

Update: The :has() pseudo-class was introduced in 2022, and is supported by all major browsers except Firefox as of June 2023.

You can now style parent elements based on child state like so:

label::before {
  content: 'Not checked';
}

label:has(input:checked) {
  background: yellow;
}

label:has(input:checked)::before {
  content: 'Checked!';
}

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

CourtDemone · Answer 3 · 2016-10-19T00:47:38.453

4

You wouldn't be able to change the content of the label based on the state of the input, you'd need JS for that.

However, you can use pseudo selector in regular ol CSS (and SCSS by extension) to style the checkbox itself using input:checked{}

EDIT: I stand corrected, see Leonardo Costa's solution using sibling selectors.

edited Oct 19 '16 at 00:47

answered Oct 19 '16 at 00:08

CourtDemone

5,772
6
23
25

Diego Delgado · Answer 4 · 2022-11-13T19:16:04.250

1

As of today you can use the new :has() pseudo-class as a parent selector:

label:has(:checked)::before {
    content: "«";
    color: blue;
}

edited Nov 13 '22 at 19:16

answered Nov 07 '22 at 16:53

Diego Delgado

67
10

except in firefox: https://caniuse.com/?search=has – tettoffensive Jan 30 '23 at 21:42
By default, but it can be enabled in about:config by setting the layout.css.has-selector.enabled flag to true (See notes in the link) – Diego Delgado Feb 01 '23 at 14:10
yes, but it's important to note since you wouldn't want to ship it to production just yet – tettoffensive Feb 01 '23 at 19:48

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

4 Answers4

Linked