lisamiltonbayer
11/13/2017 - 9:30 AM

CSS - Checkbox Styling

CSS - Checkbox Styling

[type="checkbox"]:not(:checked),
[type="checkbox"]:checked {
  position: absolute;
  left: -9999px;
}
[type="checkbox"]:not(:checked) + label,
[type="checkbox"]:checked + label {
  position: relative;
  padding-left: 50px;
  cursor: pointer;
  font-weight: 300;
}

/* checkbox aspect */
[type="checkbox"]:not(:checked) + label:before,
[type="checkbox"]:checked + label:before {
  content: '';
  position: absolute;
  left: 0; top: 0;
  width: 35px;
  height: 35px;
  border: 2px solid #14B8D5;
  background-color: transparent;
  box-shadow: inset 0 1px 3px rgba(0,0,0,.1);
  border-radius: 0;
}
/* checked mark aspect */
[type="checkbox"]:not(:checked) + label:after,
[type="checkbox"]:checked + label:after {
  content: url(../images/tick.svg);
  background-color: #14B8D5;
  position: absolute;
  width: 35px;
  height: 35px;
  top: 0em; 
  left: 0em;
  color: #09ad7e;
  border: none;
}
/* checked mark aspect changes */
[type="checkbox"]:not(:checked) + label:after {
  opacity: 0;
}
[type="checkbox"]:checked + label:after {
  opacity: 1;
}

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