CODEWITHSUNDEEP
htmlcssforms
Prd87
Prd87

Reputation: 315

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.

Upvotes: 2

Views: 2789

Answers (2)

sandeep
sandeep

Reputation: 92793

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/

Upvotes: 2

Bud Damyanov
Bud Damyanov

Reputation: 31839

Of course, you should add also a second class, let`s say "active" to the label, only when the radio button is selected:

<style type="text/css">
    label.active {
      background-color: #aa2233;
    }
</style>
<label class="inputOption active" for="1"><input type="radio" name="radio1" id="1" /><span class="aText">Option 1</span></label>

See here.

Upvotes: 0

Related Questions