title: Changing background color with CSS on radio button input when :checked
body: <h1>Problem</h1>
  
  <p>Trying to change the background color of a radio input that's been styled like a button so that when the user clicks on it, the color will change from grey to yellow.</p>
  
  <h1>Code snippet</h1>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code> /*----------------------------------
          SIDEBAR
          ----------------------------------*/
   input[type=radio],
   input[type=checkbox] {
     display: none;
   }
   form input[type="radio"]:checked + label {
     background-color: yellow;
   }
   label {
     display: block;
     appearance: button;
     -webkit-appearance: button;
     -moz-appearance: button;
     -ms-appearance: button;
     font-family: 'Roboto', sans-serif;
     font-weight: 400;
     background: #DDDDDD;
     font-size: 1.6rem;
     color: #111111;
     border: 2px solid #AAAAAA;
     padding: 8px;
     width: 40%;
     margin: 0 auto;
     text-align: center;
     &amp;: hover {
       cursor: pointer;
     }
     &amp;: checked {
       background-color: $yellow;
     }
   }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;form&gt;
    &lt;label for=""&gt;
      &lt;input type="radio" class="button" id="Male" name="gender"&gt;Male&lt;/input&gt;
    &lt;/label&gt;
    &lt;label for=""&gt;
      &lt;input type="radio" class="button" id="Female" name="gender"&gt;Female&lt;/input&gt;
    &lt;/label&gt;
  &lt;/form&gt;</code></pre>
  </div>
  </div>
  </p>