Checkbox custom style with CSS

by Richard Hunter

HTML

<div class="checkbox">
  <input type="checkbox" id="checkbox_1">
  <label for="checkbox_1">Pure CSS Checkbox</label>
</div>

CSS

.checkbox {
  background: limegreen;
  line-height: 1;
  display: inline-block;
  font-size: 4rem;
  box-sizing: border-box;
  padding: 0;
}

.checkbox label {
  background: pink;
  font-size: inherit;
  display: inline-block;
  box-sizing: border-box;
  position: relative;
  padding-left: 1.4em;
  padding-right: 0.4em;
}

.checkbox input[type="checkbox"] {
  opacity: 0;
  position: absolute;
}

.checkbox label::before,
.checkbox label::after {
  position: absolute;
  box-sizing: border-box;
}

.checkbox label::before {
  content: "";
  display: inline-block;
  height: 1em;
  width: 1em;
  border: .1em solid red;
  left: 0;
  top: 0;
}

.checkbox label::after {
  content: "";
  display: inline-block;
  height: .6em;
  width: .6em;
  left: 0.2em;
  top: 0.2em;
  background: green;
}

/*Hide the checkmark by default*/

.checkbox input[type="checkbox"]+label::after {
  content: none;
}

/*Unhide the checkmark on the checked state*/

.checkbox input[type="checkbox"]:checked+label::after {
  content: "";
}

/*Adding focus styles on the outer-box of the fake checkbox*/

.checkbox input[type="checkbox"]:focus+label::before {
  outline: rgb(59, 153, 252) auto 5px;
}