Generated by SassMeister.com.

SassMeister-input-HTML.html

<input class="" type="checkbox" name="sass" value="sass" />SASS

SassMeister-input.scss

// ----
// Sass (v3.4.14)
// Compass (v1.0.3)
// ----

$input-size: 1.25em;
$check-size: $input-size / 6;
$r-check-scale: 4;
$r-check-trans: (($r-check-scale - 1) / 2) * $check-size;
$l-check-scale: 2.6;
$l-check-trans: (($l-check-scale - 1) / 2) * $check-size;

@media screen and (-webkit-min-device-pixel-ratio:0) {
  input, textarea, select {
    -webkit-appearance: none;
  }

  input, textarea, select {
    border: 1px solid #bbb;
    padding: 0.5em;
    font-size: 15px;
    line-height: 1.2em;
    width: 80%;
    background: #fff;
    background: -webkit-gradient(linear, left top, left bottom, from(#f5f5f5), to(#e1e1e1));
    -webkit-appearance: none;
    -webkit-box-shadow: 1px 1px 1px #fff;
    -webkit-border-radius: 0.4em;
  }
 
  input[type=checkbox],
  input[type=radio] {
    display: inline-block;
    font-size: 15px;
    line-height: 1em;
    margin: 0 0.25em 0 1em;
    padding: 0;
    width: $input-size;
    height: $input-size;
    -webkit-border-radius: 0.15em;
    vertical-align: text-top;
  }
  
  input[type=radio] {
    -webkit-border-radius: 2em;
  }
  
  input[type=checkbox]:checked {
    //background: -webkit-linear-gradient(black, #999);
  }
  
  check {
    width: $check-size;
    height: $check-size;
    position: absolute;
    content: "\00a0";
    background-color: #27AE60;
    margin-top: $input-size * .6 - ($check-size / 2);
    margin-left: $input-size * .4 - ($check-size / 2);
  }

  input[type=checkbox]:checked:after {
    @extend check;
    z-index: 2;
    //-webkit-box-shadow: .2px 1px .5px black;
    -webkit-transform: rotate(-45deg) translateX($r-check-trans) scaleX($r-check-scale);
  }
  
  input[type=checkbox]:checked:before {
    @extend check;
    z-index: 1;
    -webkit-transform: rotate(-135deg) translateX($l-check-trans) scaleX($l-check-scale) ;
    //-webkit-box-shadow: .3px -1px 1px black;
  }
}

SassMeister-output.css

@media screen and (-webkit-min-device-pixel-ratio: 0) {
  input, textarea, select {
    -webkit-appearance: none;
  }

  input, textarea, select {
    border: 1px solid #bbb;
    padding: 0.5em;
    font-size: 15px;
    line-height: 1.2em;
    width: 80%;
    background: #fff;
    background: -webkit-gradient(linear, left top, left bottom, from(#f5f5f5), to(#e1e1e1));
    -webkit-appearance: none;
    -webkit-box-shadow: 1px 1px 1px #fff;
    -webkit-border-radius: 0.4em;
  }

  input[type=checkbox],
  input[type=radio] {
    display: inline-block;
    font-size: 15px;
    line-height: 1em;
    margin: 0 0.25em 0 1em;
    padding: 0;
    width: 1.25em;
    height: 1.25em;
    -webkit-border-radius: 0.15em;
    vertical-align: text-top;
  }

  input[type=radio] {
    -webkit-border-radius: 2em;
  }

  check, input[type=checkbox]:checked:after, input[type=checkbox]:checked:before {
    width: 0.20833em;
    height: 0.20833em;
    position: absolute;
    content: "\00a0";
    background-color: #27AE60;
    margin-top: 0.64583em;
    margin-left: 0.39583em;
  }

  input[type=checkbox]:checked:after {
    z-index: 2;
    -webkit-transform: rotate(-45deg) translateX(0.3125em) scaleX(4);
  }

  input[type=checkbox]:checked:before {
    z-index: 1;
    -webkit-transform: rotate(-135deg) translateX(0.16667em) scaleX(2.6);
  }
}

SassMeister-rendered.html

<input class="" type="checkbox" name="sass" value="sass" />SASS