CSS of a HTML checkbox

input-checkbox.scss

// <input type="checkbox" id="1"><label for="1"></label>

$checkbox-color: white;
$checkbox-color-checked: green;

input[type="checkbox"] {
  display: none;

  & + label:before {
    background: $checkbox-color;
    content: "\00a0";
    display: inline-block;
    font: 20px/1em sans-serif;
    height: 25px;
    width: 25px;
    margin: 0 .25em 0 0;
    padding: 0;
    vertical-align: top;
  }

  & + label:hover:before {
    background: darken($checkbox-color, 10%);
  }

  & + label:active:before {
    background: darken($checkbox-color, 20%);
  }

  &:checked + label:hover:before {
    background: darken($checkbox-color-checked, 5%);
  }

  &:checked + label:active:before {
    background: darken($checkbox-color-checked, 10%);
  }

  &:checked + label:before {
    background: $checkbox-color-checked;
    color: $checkbox-color;
    content: '\2713';
    text-align: center;
    line-height: 26px;
  }
}