0

I have the following markup:

<label>
    <input type="checkbox">
    One
</label>
<label>
    <input type="checkbox">
    Two
</label>

I would like to change the label background for the checkbox checked state.

The issue is that the input is inside the label, so I can't use the good old input[type=checkbox] + label {}

I cannot change this markup, so I cannot easily just add <span> tag around the text.

Is there a way to change the label on :checked state?

Here is my work in progress fiddle: https://jsfiddle.net/kgpnbdzy/2/

Temani Afif
  • 180,975
  • 14
  • 166
  • 216
Joe Bloggs
  • 1,154
  • 1
  • 15
  • 43
  • There will/might be the [`:has()`](https://developer.mozilla.org/en-US/docs/Web/CSS/:has) pseudo class in the future, but right now it isn't supported by any browser. – Andreas Jun 15 '19 at 09:44
  • The title (and imho the description) asks for a CSS solution, hence why the JavaScript and jQuery tags? With JavaScript this would be easy. – Andreas Jun 15 '19 at 09:46
  • Thanks @Andreas , I'm opened to suggestions, that's why I added the js tags .. – Joe Bloggs Jun 15 '19 at 09:55
  • @Andreas would you be please able to edit my fiddle with the jquery solution? – Joe Bloggs Jun 15 '19 at 09:57
  • Check the [dupe target](https://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector) – Andreas Jun 15 '19 at 10:05

0 Answers0