title: Change of radio button after checking does not work at all
body: <p>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.</p>
  
  <p>HTML: </p>
  
  <pre><code>&lt;div id="quiz"&gt;
  
        &lt;input name="question_id" value="2" type="hidden"&gt;
        &lt;ul class="list-inline"&gt;
  
  
              &lt;label for="id_answers_0"&gt;&lt;input id="id_answers_0" name="answers" value="5" type="radio"&gt; None&lt;/label&gt;
  
  
  
              &lt;label for="id_answers_1"&gt;&lt;input id="id_answers_1" name="answers" value="6" type="radio"&gt; A little&lt;/label&gt;
  
  
  
              &lt;label for="id_answers_2"&gt;&lt;input id="id_answers_2" name="answers" value="7" type="radio"&gt; A lot&lt;/label&gt;
  
  
  
              &lt;label for="id_answers_3"&gt;&lt;input id="id_answers_3" name="answers" value="8" type="radio"&gt; Enormous&lt;/label&gt;
  
  
        &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>#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;
  </code></pre>
  
  <p>}</p>
  
  <p>Jsfiddle example :
  <a href="http://jsfiddle.net/n5xb4b9v/" rel="nofollow">http://jsfiddle.net/n5xb4b9v/</a></p>
  
  <p>Cheers</p>