CODEWITHSUNDEEP
htmlcsscheckboxbackgroundlabel
user3047469
user3047469

Reputation: 39

Change Label Background Color When Checkbox Checked

I need help about this code please, how can i make the whole label's background color change when i check the checkbox ? I want the whole td or change it's background when the checkbox checked

I think I can do it by using css only

https://codepen.io/Haitham1000/pen/ZEWPMeY

<table class="choices">
  <tr>
    <td>
      <div class="checkbox">
        <label><input type="checkbox" value="">All categories</label>
      </div>
    </td>

    <td>
      <div class="checkbox">
        <label><input type="checkbox" value="">1</label>
      </div>
    </td>

    <td>
      <div class="checkbox disabled">
        <label><input type="checkbox" value="" disabled>2</label>
      </div>
    </td>

    <td>
      <div class="checkbox">
        <label><input type="checkbox" value="">3</label>
      </div>
    </td>

    <td>
      <div class="checkbox">
        <label><input type="checkbox" value="">4</label>
      </div>
    </td>
  </tr>
</table>

Upvotes: 0

Views: 2700

Answers (2)

Pedro Cardoso
Pedro Cardoso

Reputation: 173

It's simple!

Put your labels after the Input:

<input type="checkbox" value=""><label>All categories</label>

Add this css to your code:

input:checked ~ label {
  background-color: blue;
}

Upvotes: 2

Jack
Jack

Reputation: 1999

That would require a parent selector, which doesn't exist for CSS. You however do siblings that come after the checkbox. This means you could have a background element that stretches the entire width and height and is behind all the other elements change color. See my snippet

input:checked ~ .background {
  background-color: blue;
}

.background {
  position: fixed;
  z-index: -1;
  
  top: 0; left: 0;

  width: 100vw;
  height: 100vh;
  
  background-color: grey;
}
<input type="checkbox">
<div class="background">

Upvotes: 1

Related Questions