How to style selected radio button

Question

My HTML is like this

    <div class="col-md-12 money-radio-container">
  <input type="radio" name="optradio" class="money-radio" value="10">10 <span>$</span>
  <input type="radio" name="optradio" class="money-radio" value="20">20 <span>$</span>
  <input type="radio" name="optradio" class="money-radio" value="50">50 <span>$</span>
</div>

Now I want to give red color to which ever radio button is selected. How can I achieve this through CSS?

Note: As you may have noticed When i click on each radio button no html change happens. So i don't know how to identify selected one. Fiddle: https://jsfiddle.net/rrmzvkag/3/

@AndyHolmes I already tried it here. but not working https://jsfiddle.net/rrmzvkag/3/ — None, Dec 16 '16 at 12:34
That's because it's not `type="checked"`. It's `input[type="radio"]:checked` — Andy Holmes, Dec 16 '16 at 12:40

score 2 · Accepted Answer · answered Dec 16 '16 at 12:31

2

The CSS rule would be

input[type="radio"]:checked

Unsure what exactly what you want to do but if you were planning on doing some styling on the element which goes after each radio element in your question you'd use the following rule

input[type="radio"]:checked + span

answered Dec 16 '16 at 12:31

Lee Brindley

6,242
5
41
62

I have tried it here. But not working https://jsfiddle.net/rrmzvkag/2/ – None Dec 16 '16 at 12:32
Can you send me an updated Fiddle with correct resolution? – None Dec 16 '16 at 12:33
You did not even write the CSS I provided in the answer. Jesus. – Lee Brindley Dec 16 '16 at 12:33
Sorry, Wrong fiddle. this is the correct one https://jsfiddle.net/rrmzvkag/3/ – None Dec 16 '16 at 12:34
No it's not - you're saying type="checkbox" in your fiddle. https://jsfiddle.net/rrmzvkag/4/ – Lee Brindley Dec 16 '16 at 12:35
That latest link makes the span's colour red when the radio button is checked, the rest is yours. – Lee Brindley Dec 16 '16 at 12:37

How to style selected radio button

1 Answers1