Cacher is the code snippet organizer for pro developers

//<input type="checkbox" id="checkbox"><label for="checkbox">label text</label>
//
input[type=checkbox] {
  & + label {
    position: relative;
    padding: 0 0 0 60px;
  }
  &:not(checked) {
    position: absolute;
    opacity: 0;
    & + label:before {
      content: '';
      position: absolute;
      top: -4px;
      left: 0;
      width: 50px;
      height: 26px;
      border-radius: 13px;
      background: #fff;
      box-shadow: inset 0 2px 3px rgba(0, 0, 0, .2);
    }
    & + label:after {
      content: '';
      position: absolute;
      top: -2px;
      left: 2px;
      width: 22px;
      height: 22px;
      border-radius: 10px;
      background: #FF4200;
      box-shadow: 0 2px 5px rgba(0, 0, 0, .3);
      transition: all .2s;
    }
  }
  &:checked + label {
    &:before {
      background: #9FD468;
    }
    &:after {
      left: 26px;
      background: #fff;
    }
  }
  &:focus + label:before {
    box-shadow: 0 0 0 3px rgba(255, 255, 0, .5);
  }
}