Стилизация чекбокса CSS3

[Heidel]

HTML

<label class="checkbox">
  <input type="checkbox">
  <span class="box"></span>
  lorem ipsum
</label>

CSS

$white: #fefefe;
$font: #3e4651;
$red: #e76b6b;
$green: #249991;

body {
  padding: 50px;
  font-family: Arial;
  color: $font;
  font-size: 50px;
}

.checkbox {
  cursor: pointer;
  
  input {
    display: none;
    
    &:checked + .box {
      background-color: $green;
      
      &:after {
        left: 49px;
      }
    }
  }
  
  .box {
    position: relative;
    display: block;
    float: left;
    width: 100px;
    height: 50px;
    background-color: $red;
    border-radius: 50px;
    margin-right: 20px;
    transition: background-color 0.2s ease-in-out;
    box-shadow: inset 0 0 5px 2px rgba(0,0,0,0.3);
    
    &:after {
      content: '';
      position: absolute;
      width: 50px;
      height: 96%;
      background-color: $white;
      border-radius: 50%;
      left: 1px;
      top: 2%;
      transition: left 0.2s ease-in-out;
      box-shadow: inset 5px -5px 10px 5px rgba(0,0,0,0.2), 0 0 1px 1px rgba(0,0,0,0.2);
    }
  }
}

https://jsfiddle.net/a7ku5obh/72/

https://codepen.io/docode/pen/yYWENN

@темы: Верстка, Стилизация чекбокса CSS3, CSS3