Styled Checkbox

Using single INPUT element and appearance: none

by Konstantin Rouda

HTML

<input type="checkbox" class="o-checkbox" />

CSS

HTML {
  /*using system font-stack*/
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  font-size: 115%; /*~18px*/
  font-size: calc(16px + (20 - 16) * (100vw - 300px) / (1300 - 300) );
  line-height: 1.5;
  box-sizing: border-box;
}

BODY {
  margin: 0;
  color: #3a3d40;
  background: rgb(253, 254, 253);
}

*, *::before, *::after {
  box-sizing: inherit;
  color: inherit;
}

/*Actual Style*/
.o-checkbox {
  width: 2.50000rem; /*~40px*/
  height: 1.25000rem; /*~20px*/
  border: 0.06250rem solid rgb(189, 190, 193); /*~1px solid rgb(189, 190, 193)*/
  border-radius: 25% / 50%;
  background: transparent;
  -webkit-appearance: none;
  -moz-appearance: none;
  -o-appearance: none;
  appearance: none;
  cursor: pointer;
  box-shadow: -1.25rem 0rem 0rem 0.04rem rgb(189, 190, 193) inset; /*~-20px ~0px ~0px ~0px rgb(189, 190, 193) inset*/
  transition: box-shadow 0.2s ease-out;
  outline: none;
}

.o-checkbox:checked {
  border-color: rgb(166, 198, 255);
  box-shadow: 1.25rem 0rem 0rem 0.04rem rgb(154, 190, 255) inset; /*~20px ~0px ~0px ~0px rgb(154, 190, 255) inset*/
}


.o-checkbox::-ms-check {
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; /* IE 8 */
  filter: alpha(opacity=0); /* IE 5-7 */
  opacity: 0;
}