A CodePen by smhmic. Graphic Checkbox (All Browsers) - Use two images to indicate the state of a checkbox.

index.html

<input type="checkbox" id="cb1" class="graphic" checked />
<label for="cb1"><span class="flag"></span>Checkbox</label>

style.scss

@import "compass";
/* demo presentation */
body {
  background:#eee;
  padding:50px 20px;
  text-align: center;
}

/* functionality */
input[type="checkbox"].graphic {
    display: none;
}
 
input[type="checkbox"].graphic + label,
input[type="checkbox"].graphic + label > .flag {
    padding: 0;
    display: inline-block;
}
input[type="checkbox"].graphic + label {
    position: relative;
    /* style */
    font-size: 36px;
    font-family: Verdana;
    text-shadow: 0 0 9px rgba(0,0,0,0.4);
    color: #333;
}
input[type="checkbox"].graphic + label > .flag {
    position: absolute;
    right: 0;
    /* style */
    width:68px;
    left: -75px;
    top: -15px;
    bottom: -15px;
}

/* checked state indicator images */
input[type="checkbox"].graphic + label > .flag {  background-repeat:no-repeat;
  background-position:0px 50%;
  content: '';
  z-index:2;
  transform:scale(1) rotate(0deg);
}
input[type="checkbox"].graphic:checked + label > .flag,
input[type="checkbox"].graphic + label:active > .flag { 
  background-image:url(http://cl.ly/image/0v3Y1M1D2l1f/tick.png);
  transform:scale(0.9) rotate(360deg);
}
input[type="checkbox"].graphic + label > .flag,
input[type="checkbox"].graphic:checked + label:active > .flag {
  background-image:url(http://cl.ly/image/0B0E1b0z003I/cross.png);
  transform:scale(0.9) rotate(0deg);
}
/* animation */
input[type="checkbox"].graphic + label > .flag  {
}
input[type="checkbox"].graphic + label > .flag {
  transition: all 0.5s cubic-bezier(1.000, -0.360, 0.000, 1.385); /* custom */
  transition-timing-function: cubic-bezier(1.000, -0.360, 0.000, 1.385); /* custom */
}

/*a {
  display:block;
  height:68px;
  margin:0 auto;
  outline:none;
  position:relative;
  width:68px;
  span {
    left:50%;
    margin:-34px 0 0 -34px;
    position:absolute;
    top:50%;
  }
  &:hover, 
  &:active, 
  &:focus {
    outline:none;
  }
}*/