Label wrapping input checkbox. How to make label css responsive?

Question

I've created sample code to show what I'm looking for. I have an input wrapped by the label. I would like to change the background of the label when the input is checked. I tried different ways but I couldn't find a solution.

 <p>Example:</p>
     
<label class='label-example'>
  <input type="checkbox" name="input-example" value="example-1" class='input-example'>
    Example One
</label>
           
<label class='label-example'>
  <input type="checkbox" name="input-example" value="example-2" class='input-example'>
    Example Two
</label>
        

p {
  margin-bottom: 4rem;
}

.label-example {
  padding: 2rem; 
  border: 1px solid grey;
  border-radius: 20px;
  cursor: pointer;
  margin: 0px 20px;
}

.label-example:hover {
  background-color: lightgray;
}

I would like to change the background of the label when the input is checked.