input[type=checkbox] { display: none;}
input[type=checkbox] + label { display: block; margin: 5px 0 5px 0; padding:0; cursor: pointer; vertical-align:middle;}

input[type=checkbox] + label:before {
  content: "\2714";
  border: 0.1em solid #000;
  border-radius: 0.2em;
  display: inline-block;
  width: 1em;
  height: 1em;
  padding-left: 0.2em;
  padding-bottom: 0.3em;
  margin-right: 0.2em;
  vertical-align: bottom;
  color: transparent;
  transition: .2s;
}

input[type=checkbox] + label:active:before { transform: scale(0);}
input[type=checkbox]:checked + label:before { background-color: MediumSeaGreen; border-color: MediumSeaGreen; color: #fff;}
input[type=checkbox]:disabled + label:before {transform: scale(1);border-color: #aaa;}
input[type=checkbox]:checked:disabled + label:before { transform: scale(1); background-color: #bfb; border-color: #bfb;}