title: How to make radio button like on/off switches using css
body: <p>I have requirement of radio buttons with on/off method i.e when click on one radio button it should on and when click on second button first button should off but below code is not working as per my expectation.</p>
  
  <p>Here is the snippet for that html and css code:</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>body {
    background: #0288D1;
  }
  
  .checkboxes-and-radios {
    margin: 80px auto 0;
    width: 280px;
    padding: 30px;
    background: #fafafa;
    input {
      display: none;
    }
    label {
      cursor: pointer;
      padding-right: 35px;
      position: relative;
      display: block;
      font-size: 18px;
      padding: 15px 0
    }
    input[type="checkbox"],
    input[type="radio"] {
      position: absolute;
      visibility: hidden !important;
    }
    input[type="checkbox"]+label,
    input[type="radio"]+label {
      &amp;:before,
      &amp;:after {
        content: '';
        position: absolute;
        top: 50%;
        margin-top: -7.5px;
        box-sizing: border-box;
      }
      &amp;:before {
        width: 30px;
        height: 15px;
        right: 0px;
        background: #fff;
        border: 1px solid #e4e3e1;
        border-radius: 15px;
      }
      &amp;:after {
        width: 15px;
        height: 15px;
        right: 15px;
        background: #BDBDBD;
        border-radius: 50%;
        transition: all 200ms ease-out;
      }
    }
    input[type="checkbox"]:checked+label,
    input[type="radio"]:checked+label {
      &amp;:after {
        right: 0px;
        background: #FF9800;
      }
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="checkboxes-and-radios"&gt;
    &lt;h1&gt;Radios:&lt;/h1&gt;
    &lt;input type="radio" name="radio-cats" id="radio-1" value="1" checked&gt;
    &lt;label for="radio-1"&gt;Radio Label 1&lt;/label&gt;
    &lt;input type="radio" name="radio-cats" id="radio-2" value="2"&gt;
    &lt;label for="radio-2"&gt;Radio Label 2&lt;/label&gt;
    &lt;input type="radio" name="radio-cats" id="radio-3" value="3" checked&gt;
    &lt;label for="radio-3"&gt;Radio Label 3&lt;/label&gt;
    &lt;h1&gt;Checkboxes:&lt;/h1&gt;
    &lt;input type="checkbox" name="checkbox-cats[]" id="checkbox-1" value="1" checked&gt;
    &lt;label for="checkbox-1"&gt;Checkbox Label 1&lt;/label&gt;
    &lt;input type="checkbox" name="checkbox-cats[]" id="checkbox-2" value="2"&gt;
    &lt;label for="checkbox-2"&gt;Checkbox Label 2&lt;/label&gt;
    &lt;input type="checkbox" name="checkbox-cats[]" id="checkbox-3" value="3" checked&gt;
    &lt;label for="checkbox-3"&gt;Checkbox Label 3&lt;/label&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>expected output:</p>
  
  <p><img src="https://i.stack.imgur.com/iyJeO.png" /></p>
  
  <p>so how to add css that will look like in image shown in top?</p>