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

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

<label><input type="checkbox"><i></i></input></label>

body{
  text-align:center;
}
input{
  display: none;
}

i{
  display: inline-block;
  width: 100px;
  height: 100px;
  border:1px solid #ccc;
  position: relative;
}
i:before{
  content:'';
  position: absolute;
  top:10px;
  right:10px;
  bottom:10px;
  left:10px;
  background:red;
  transform:scale(0);
  transition:.4s;
}
input:checked+i:before{
  transform:scale(1);
  transition:.4s;
}