Target The Label Of A Checked Input

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

Payment Plan:

Solution 1:

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><inputname="os0"type="radio"value="monthly"><span>TEST</span></label>

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

input:checked + span {
   color: red
}

WORKING DEMO

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
}

WORKING DEMO.

Solution 2:

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

<div><p>Payment Plan:</p><inputid="os0"name="os0"type="radio"value="monthly"><labelfor="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.

http://jsfiddle.net/PMmrk/

Share