JSFiddle - React, Tailwind, and code Playground

Fancy checkbox/radio

by Jernej Slejko

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha/js/bootstrap.min.js"></script>
{#radio#}<br>
    <div class="switch">
        <input name="optionsR" id="optionsR1" class="onoff-toggle onoff-toggle-round" type="radio" value="ONE">
        <label for="optionsR1"></label>
        <span>Option one</span>
    </div>
    <div class="switch">
        <input name="optionsR" id="optionsR2" class="onoff-toggle onoff-toggle-round" type="radio" value="TWO">
        <label for="optionsR2"></label>
        <span>Option two</span>
    </div>
    <div class="switch">
        <input name="optionsR" id="optionsR3" class="onoff-toggle onoff-toggle-round" type="radio" value="THREE">
        <label for="optionsR3"></label>
        <span>Option three</span>
    </div>

    {#checkbox#}<br>
    <div class="switch">
        <input id="chk1" class="onoff-toggle onoff-toggle-round" type="checkbox">
        <label for="chk1"></label>
        <span>Checkbox</span>
  </div>
  
      {#checkbox-siwtch#}<br>
    <div class="switch">
        <span class="chk-switch">Off</span>
        <input id="chks" class="onoff-toggle onoff-toggle-round" type="checkbox">
        <label for="chks"></label>
        <span>On</span>
  </div>

CSS

div {
    margin: 50px;
}
.onoff-toggle {
    position: absolute;
    margin-left: -9999px;
    visibility: hidden;
}
.onoff-toggle + label {
    display: inline-block;
    position: relative;
    cursor: pointer;
    outline: none;
    user-select: none;
}
input.onoff-toggle-round + label {
    padding: 2px;
    width: 50px;
    height: 14px;
    background-color: #E6E6E6;
    border-radius: 10px;
}
input.onoff-toggle-round + label:before {
    display: block;
    position: absolute;
    top: 1px;
    left: 1px;
    bottom: 1px;
    content: "";
}
input.onoff-toggle-round + label + span {
    position: relative;
    top: -9px;
    left: 5px;
}
input.onoff-toggle-round + label:after {
    display: block;
    position: absolute;
    top: -5px;
    left: 1px;
    bottom: -3px;
    content: "";
    height: 23px;
}
input.onoff-toggle-round + label:before {
    right: 1px;
    background-color: #E6E6E6;
    border-radius: 10px;
    transition: background 0.4s;
}
input.onoff-toggle-round + label:after {
    width: 23px;
    background-color: #C2C2C2;
    border-radius: 23px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    transition: margin 0.4s, background 0.4s;
}
input.onoff-toggle-round:checked + label:before {
    background-color: #FABF78;
}
input.onoff-toggle-round:checked + label {
    background-color: #FABF78;
    transition: background 0.4s;
}
input.onoff-toggle-round:checked + label:after {
    margin-left: 25px;
    background-color: #F7941E;
}
.switch span.chk-switch {
    position: relative;
    right: 5px;
    top: -9px;
}