Styling label of a (hidden) radiobutton

Question

Basicly it's a survey with answers from 1 to 10. When someone clicks on a number I want the background of my label to change color. I've used radiobuttons because they can only choose 1 answer.

<label class="lfirst">
    <input type="radio" name="answer1" value="1">       
    1
</label>

<label>
    <input type="radio" name="answer1" value="2">       
    2
</label>


<style>
input[type="radio"]{
   display: none;
}
.answers label {
  display: inline-block;
  font-weight: bold;
  margin: 0 3px 0 0;
  padding: 4px 12px;
  cursor: pointer;
  background: orange;
}

.answers label + input[type="radio"]:checked{
  background: red;  
}
</style>

I don't know what you trying to achieve? You want to give a background color to a hidden checked field? That is not possible, because you are hiding it.... beside that, there is no parent selector in CSS. — Siyah, Feb 11 '14 at 13:58
There is no parent selector in css: [Parent Selector](http://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector) — Manu, Feb 11 '14 at 13:59
@Siyah Basicly it's a survey with answers from 1 to 10. When someone clicks on a number I want the background of my label to change color. I've used radiobuttons because they can only choose 1 answer — Jnb, Feb 11 '14 at 14:01

score 0 · Answer 1 · answered Feb 11 '14 at 14:01

you can get the width and height of radio button, wrap it in a div with that width and height, and apply the background color to it. This way when you hide the radio button the div will still be there with same width and height and background color of your choice.

Styling label of a (hidden) radiobutton

1 Answers1