CODEWITHSUNDEEP
cssinputradio-buttonchecked
Zeljko Radic
Zeljko Radic

Reputation: 7

Style label of a checked radio button, which is wrapped in label tag

I would appreciate if someone could point me in the right direction when it comes to the following issue.

So I have this code:

<label class="option"><input type="radio" name="rectangle" value="3 1/8 inches" checked><span>d</span> 3 1/8 inches</label>

What I want to achieve is to style label.option, which should be based on radio button state checked. What would be the easiest way to achieve using CSS only?

Thanks

Upvotes: 0

Views: 1047

Answers (2)

Dmitriy
Dmitriy

Reputation: 4503

maybe so 

input[type="radio"] {
    display: none;
}
span{
    width: 50px;
    height: 50px;
    display: block;
    border: 2px solid #f00;
}
input[type="radio"]:checked ~ span{ 
    background: #f00;
}
<label class="option" for="radio">
    <input type="radio" id="radio" name="rectangle" value="3 1/8 inches" /><span>d 3 1/8 inches</span></label>

Upvotes: 2

Purify
Purify

Reputation: 589

I believe you're looking for the :checked selector.

HTML

<input type="radio" name="rectangle" value="3 1/8 inches" checked>
<label for="rectangle" class="option"><span>d</span> 3 1/8 inches</label>

CSS

input[type="radio"]:checked + label {
   color:#ff0000;
}

Upvotes: 0

Related Questions