Change parent label background when checkbox is checked

Question

I want the selection ( :checked ) to have a different background colour.

Here my example code:

 label { display: block; background: gray; border:1px solid black; margin-bottom:5px; padding:10px; cursor: pointer; } label + [type="checkbox"]:checked { background: yellow; }

 <div class="poll"> <label class="a"><input type="checkbox" /> Yes</label> <label class="a"><input type="checkbox" /> No</label> </div>

My question is related to: Design survey form

Also take into account the situation where the input is preset in the DOM, but hidden, so the label is still clickable and toggles it.

Answer 1

You can use the :has pseudo selector for that:

 label { display: block; background: gray; border:1px solid black; margin-bottom:5px; padding:10px; cursor: pointer; user-select: none; } label:has([type="checkbox"]:checked) { background: yellow; }

 <div class="poll"> <label class="a"><input type="checkbox" /> Yes</label> <label class="a"><input type="checkbox" /> No</label> </div>

If you need browser backward-compatibility support, here's a trick:

 label { display: block; background: gray; border:1px solid black; margin-bottom:5px; padding:10px; cursor: pointer; overflow: hidden; /* Important so the outline won't overflow */ user-select: none; } label:checked { outline: 9999px solid yellow; }

 <div class="poll"> <label><input type="checkbox" /> Yes</label> <label><input type="checkbox" /> No</label> </div>

---

OP asked me in the comments for a solution tailored for a hidden checkbox.

All that is needed is to use the hidden attribute on the input.
Never use CSS display: none to not render an input element. It is preferable to use the designated attribute .

Note that this also has a bug in Firefox. Below is a Firefox-hack to overcome it.

 label { display: block; background: gray; border:1px solid black; margin-bottom:5px; padding:10px; cursor: pointer; user-select: none; } label:has([type="checkbox"]:checked) { background: yellow; }

 <div class="poll"> <label><input type="checkbox" hidden /> Yes</label> <label><input type="checkbox" hidden /> No</label> </div>

Firefox-supported solution:

Extract each input to be above the label element, and use a unique id attribute on each input element, and a matching for attribute on each label :

 label { display: block; background: gray; border:1px solid black; margin-bottom:5px; padding:10px; cursor: pointer; user-select: none; }:checked + label { background: yellow; }

 <div class="poll"> <input type="checkbox" id='poll-1' hidden/> <label for='poll-1'>Yes</label> <input type="checkbox" id='poll-2' hidden/> <label for='poll-2'>No</label> </div>