styled checkboxes

checkbox.css

input[type=checkbox] {
  outline: none;
  position: relative;
}

input[type=checkbox]:after {
  content: ' ';
  display: inline-block;
  width: 13px;
  height: 13px;
  background: #2e9aff;
  border-radius: 3px;
  position: absolute;
}

input[type=checkbox]:focus:before {
  content: ' ';
  display: inline-block;
  width: 15px;
  height: 15px;
  border-radius: 3px;
  position: absolute;
  top: -2px;
  left: -2px;
  border-radius: 3px;
  border: 1px solid #2e9aff;
}

input[type=checkbox]:checked:after {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3E%3C/svg%3E");
  background-size: 60%;
  background-position: 50%;
  background-repeat: no-repeat;
}

input[type=checkbox]:indeterminate:after {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 4'%3E%3Cpath stroke='%23fff' d='M0 2h4'/%3E%3C/svg%3E");
  background-size: 60%;
  background-position: 50%;
  background-repeat: no-repeat;
}