Prd87 Prd87 - 1 month ago 5
CSS Question

How can I apply styles to a label for a selected radio button

Is it possible to style an active label with just CSS using the following markup:

<label class="inputOption" for="1"><input type="radio" name="radio1" id="1" /><span class="aText">Option 1</span></label>


I want to add some background styles to the label once the radio inside is selected. Prefer not to use javascript. It is for mobile so it doesn't have to work on older browsers.

Answer

For this your can use CSS :checked property for this. Write like this:

#one{
    position:relative;
}
#one:checked + span{
    display:inline-block;
    margin-left:-20px;
    padding-left:20px;
    background-color: #aa2233;
}

check this http://jsfiddle.net/5TxyJ/5/

Comments