Target the label of a checked input

Question

If I have a radio input that is wrapped within a label, how can I target the label when the input is checked?

<div>
  <p>Payment Plan:</p>
  <label><input name="os0" type="radio" value="monthly">TEST</label>
</div>

I tried:

input:checked + label { color: red }

and

input:checked + label

But none worked, what I am doing wrong? I also tried the > selector.

The reason I have label wrapping the input, is because I NEED the label to be clickable

Wrap the text in a span element and do `input:checked + span`. — Mr_Green, Mar 01 '14 at 17:56

score 7 · Answer 1 · edited May 23 '17 at 12:20

7

There's no parent or backward selector in CSS (yet?). Thus, we can't select the wrapper label by the wrapped input.

There are two options:

1) Wrapping the content by an inline wrapper like <span> element, as follows:

<label>
  <input name="os0" type="radio" value="monthly">
  <span>TEST</span>
</label>

Then select the <span> by using adjacent sibling selector +:

input:checked + span {
   color: red
}

2) Using for attribute for the label to target the input by its id attribute as follows:

<input name="os0" type="radio" id="myinput" value="monthly">
<label for="myinput">TEST</label>

And Then select the label by:

input:checked + label {
    color: red
}

edited May 23 '17 at 12:20

Community

answered Mar 01 '14 at 16:45

Hashem Qolami

score 2 · Answer 2 · answered Mar 01 '14 at 16:47

Your css will work if you modify your html to this:

<div>
  <p>Payment Plan:</p>
  <input id="os0" name="os0" type="radio" value="monthly">
  <label for="os0">TEST</label>
</div>

Using the for attribute with an id on the input will let you click on the label to affect the button, as it does when wrapped in the element.