当选中div中的复选框时，如何在CSS中回溯以尝试更改div颜色？

Question

I have one div which have one checkbox, I am trying to change color of div when checkbox checked - unchecked using HTML CSS only without using JavaScript . But as CSS doesn't support backtrace I am not sure how to achieve this.

CSS:

.content {
  height: 50px;
  width:50px;
  border: 1px solid black;
}

HTML:

<div class="content">
  <input type="checkbox">
</div>

Answer 1

I have wrapped the checkbox and the span inside a label and then added the CSS below:

 label { height: 50px; width: 50px; border: 1px solid black; display: inline-block; position: relative; } .content { display: inline-block; position: absolute; height: 100%; width: 100%; top: 0; z-index: -1; left: 0; } input:checked+span { background-color: red } 

 <label for="check"> <input type="checkbox"> <span class="content"> </span> </label>