changing background color with :checked in css

Question

I want to change the background color of the box once i check the checkbox, but it doesn't work with the code i wrote. am i missing something? thanks

.box{
  width: 100px;
  height: 100px;
  background-color: green;
  }
  input[type="checkbox"]:checked .box{
    background-color: red;
  }

<input type="checkbox" name="" />
<div class="box"></div>

Answer 1

this rule doesn't work because .box is not in input

input[type="checkbox"]:checked .box

but you can use adjacent sibling combinator:

input[type="checkbox"]:checked + .box

or general sibling combinator:

input[type="checkbox"]:checked ~ .box