1

I have 4 radio buttons. I want to apply style on one of them (only) - the correct answer: here is the generated HTML CODE:

<p>
<input id="SelectedAnswer" type="radio" value="5" name="SelectedAnswer">
my wrong answer
</p>
<p>
<input id="SelectedAnswer" class="correct-answer" type="radio" value="6" name="SelectedAnswer">

my correct answer

and here is my css, which doesn't work:

.correct-answer input[type="radio"] {
    background-color: #FFFF00;
    color: #0000FF;
    font-weight: bold;
}

What is wrong ?

Dani
  • 14,639
  • 11
  • 62
  • 110
  • 1
    a side note: for html to be valid, id should be unique on the page so you should not have multiple `id="selectedAnswer"` attributes – Steve Atkinson Dec 24 '13 at 10:01

1 Answers1

4

.correct-answer input[type="radio"] means radio button having parent element with class correct-answer. But, here radio button has class correct-answer.

It should be

input[type="radio"].correct-answer{}

For your information,

you are applying styles such as background-color,color,font-weight. These will not be reflected on radio button.

codingrose
  • 15,563
  • 11
  • 39
  • 58
  • Absolutely correct, but it may be worth explaining to the OP *why* it should be that as he doesn't fully understand the CSS rule he originally wrote. – CodingIntrigue Dec 24 '13 at 08:10
  • Thanks. I guess that's why nothing works, even with the "right" css. how can I change the style of a radio button - to show it is "the right " answer out of a few ? – Dani Dec 24 '13 at 08:22
  • @Dani you want to style radio button? – codingrose Dec 24 '13 at 08:24
  • @Hiral - I have 4 radio buttons that represents answer to a question - one of the is the correct answer so I want it to be colored differently, so I've added a class="correct-answer" to it's code. but nothing seems to effect it. – Dani Dec 24 '13 at 08:25
  • @Dani [this might help you](http://stackoverflow.com/questions/4641752/css-how-to-style-a-selected-radio-buttons-label) – codingrose Dec 24 '13 at 08:34