title: Customize radiobutton
body: <p>I am trying to customize some radiobuttons. I want to customize the label in order to make is as a clickable button, as in this figure:
  <a href="https://i.stack.imgur.com/Zvalv.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Zvalv.png" alt="enter image description here"></a></p>
  
  <p>Moreover I introduced a change color of the new label botton when hover and another one when focus as in these figures:
  <a href="https://i.stack.imgur.com/HXY8L.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/HXY8L.png" alt="enter image description here"></a>
  <a href="https://i.stack.imgur.com/ziNPv.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ziNPv.png" alt="enter image description here"></a></p>
  
  <p>Finally I would like to hide the typical circular button as this result:
  <a href="https://i.stack.imgur.com/hnP60.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/hnP60.png" alt="enter image description here"></a></p>
  
  <p>I have two main problems:</p>
  
  <p>1) if I hide the input button ( for example with <code>display:none</code>) I am no more able to choose the radiobutton I want.</p>
  
  <p>2 ) I introduced the change color when radiobutton is checked with the property <code>focus-within</code> but this do not satisfy me enough. Indeed when I load the page and the button is checked by default, I didn't see any change in color, because I am not focused on it.   </p>
  
  <p>The code I used is the following:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.form-control {
      line-height: 15px;
      font-size: 13px;
      font-family: 'Oswald', sans-serif;
      border: 0;
      font-weight: 300;
      display: block;
      width: 100%;
      padding: 0.375rem 0.75rem;
      color: #495057;
      background-color: #fff;
      background-clip: padding-box;
      transition: border-color 0.15s ease-in-out,box-shadow 0.15s ease-in-out;
      list-style: none;
  }
  
  .inline-item {
      display: inline-block;
  }
  
  .chip-container .chip-selection label {
      height: 28px;
      padding: 5px 10px 3px 10px;
      border-radius: 14px;
      background-color: white;
      color: #7d7d7d;
      border: #7d7d7d 1px solid;
      cursor: pointer;
      text-transform: none;
  }
  
  .chip-container .chip-selection label:hover {
      color: $footer_color;
      background-color: #D1F5FF;
      border: #1b8cab 1px solid;
  }
  
  
  .chip-container .chip-selection label:focus-within {
      color: white;
      background-color: #1b8cab;
      border: #1b8cab 1px solid;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="border-short"&gt;
  
    &lt;ul class="form-control chip-container"&gt;
  
       &lt;li class="inline-item chip-selection"&gt;&lt;label for="id_0"&gt;
       &lt;input type="radio" name="input_th" value="false"  id="id_0" checked=""&gt;
          old checkbox&lt;/label&gt;
        &lt;/li&gt;
  
        &lt;li class="inline-item chip-selection"&gt;&lt;label for="id_1"&gt;
        &lt;input type="radio" name="input_th" value="true"  id="id_1"&gt;
          new trial checkbox&lt;/label&gt;
        &lt;/li&gt;
  
    &lt;/ul&gt;
  
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>The main problem is that I can't change the html structure , and the input is child of the label.
  It is also better for me to not use any javascript, I would like to know if there is some CSS trick to solve my problem</p>
  
  <p>Thanks a lot to whom can help me
  Andrea</p>