title: Hide radio buttons and just show labels in django form (radio select)
body: <p>I want to remove the radio buttons and just show the yes or no labels. In order to do that I hid the radio input and used the css3 selector (:checked + label) to change background color according to selection. But this is not working for some reason. </p>
  
  <p><strong>HTML (from Django Template)</strong></p>
  
  <pre><code>&lt;div class="questionnaire-radio"&gt;
      &lt;label&gt;
          &lt;input class="selector" name="mdq_answer_1"   required="True" type="radio" value="y"&gt; yes
      &lt;/label&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.questionnaire-radio input[type=radio] {
    display: none;
    padding-top: 20px;
  }
  
  .questionnaire-radio input[type=radio]:checked + label {
    background-color:  #28c3ab;
    font-weight: bold;
    text-transform: uppercase;
  }
  
  .questionnaire-radio label {
    font-weight: normal;
    width: 100%;
    border: solid #28c3ab;
    border-radius: 100px;
    margin: 0;
    cursor: pointer;
  }
  
  .questionnaire-radio label:hover {
    font-weight: bold;
    text-transform: uppercase;
    background-color: #28c3ab;
    cursor: pointer;
  }
  </code></pre>
  
  <p>Any help will be highly appreciated. I am using Chrome as my browser. I am open to jQuery solutions (if necessary). </p>