Jeremi Podlasek Jeremi Podlasek - 3 months ago 10
CSS Question

Change of radio button after checking does not work at all

I want to make a quiz where radio-buttons change colors after being checked. I've created the following example but clicking does not change the background as intended.

HTML:

<div id="quiz">

<input name="question_id" value="2" type="hidden">
<ul class="list-inline">


<label for="id_answers_0"><input id="id_answers_0" name="answers" value="5" type="radio"> None</label>



<label for="id_answers_1"><input id="id_answers_1" name="answers" value="6" type="radio"> A little</label>



<label for="id_answers_2"><input id="id_answers_2" name="answers" value="7" type="radio"> A lot</label>



<label for="id_answers_3"><input id="id_answers_3" name="answers" value="8" type="radio"> Enormous</label>


</ul>
</div>


CSS:

#quiz {
margin:4px;
text-align:center;
float:left;
font-size: 16px;
padding:13px 0px;
width : 100%;


}

#quiz label {
float:left;
width:170px;
padding : 5%;
margin:4px;
background-color:#EFEFEF;
border-radius:4px;
border:1px solid #D0D0D0;
overflow:auto;

}

#quiz label:hover {
background-color: green;
color: white;
}

input[type="radio"]:checked+label{ background:black; }


#quiz label input {
position:absolute;
top:-20px;


}

Jsfiddle example :
http://jsfiddle.net/n5xb4b9v/

Cheers

Answer

Here is a working example, http://jsfiddle.net/n5xb4b9v/3/

I changed the html to this

<div id="quiz">

      <input name="question_id" value="2" type="hidden">
      <ul class="list-inline">


            <input id="id_answers_0" name="answers" value="5" type="radio"><label for="id_answers_0"> None</label>



           <input id="id_answers_1" name="answers" value="6" type="radio"><label for="id_answers_1"> A little</label>



            <input id="id_answers_2" name="answers" value="7" type="radio"><label for="id_answers_2"> A lot</label>



            <input id="id_answers_3" name="answers" value="8" type="radio"><label for="id_answers_3"> Enormous</label>


      </ul>
</div>

And added this to your css

input[type=radio] {
   display: none;
 }
#quiz input[type="radio"]:checked + label {
   background-color: black;
 }