CODEWITHSUNDEEP
htmlcsssassless
Ricardo Nascimento
Ricardo Nascimento

Reputation: 63

SCSS Input checkbox is checked style

I'm very grateful if you could help me, i was trying to set styles for 2 elements based on input:checked in my SCSS but isn't work.

<div>
<input type='checkbox' id='checkbox'></input>
<label for='checkbox'>Lorem ipsum</label>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>

div {
  user-select: none;
  input {
    &:checked + label {
      background: red;
    }
    &:checked + p {
      display: block;
    }
  }
  p {
    display:none;
  }
}

https://codepen.io/ricardonas/pen/xxZVydJ

Upvotes: 0

Views: 2854

Answers (1)

Dimitar Spassov
Dimitar Spassov

Reputation: 2743

If you want to make the paragraph visible, you need to update the selector. :checked + label means "get the label immediately after the checked element". Following this logic, you need to target "the paragraph after the label after the input":

div {
  user-select: none;
  input {
    &:checked + label {
      background: red;
    }
    &:checked + label + p {
      display: block;
    }
  }
  p {
    display:none;
  }
}

Upvotes: 1

Related Questions