<form>
  <div>
    <input type="checkbox" id="label-1" aria-labelledby="label-1-label" />
    <label for="label-1" id="label-1-label">
      Custom Checkbox 1
    </label>
  </div>

  <div>
    <input type="checkbox" id="label-2" aria-labelledby="label-2-label" />
    <label for="label-2" id="label-2-label">
      Custom Checkbox 2
    </label>
  </div>

  <div>
    <input type="checkbox" id="label-3" aria-labelledby="label-3-label" />
    <label for="label-3" id="label-3-label">
      Custom Checkbox 3
    </label>
  </div>
</form>
[type="checkbox"] {
  /* Visually Hidden Styles */
  /*
    The following styles hide the element 
    from the screen, but is still available
    to screen reader and keyboard users.
  */
  position: fixed;
  bottom: 100%;
  right: 100%;
  clip: rect(0 0 0 0); 
  border: 0;
  width: 1px; 
  height: 1px; 
  margin: -1px; 
  overflow: hidden; 
  padding: 0;
}

[type="checkbox"] + label {
  display: flex;
  position: relative;
}


[type="checkbox"] + label::before {
  content: '';
  display: inline-block;
  height: 1.125em;
  width: 1.125em;
  border: black 1px solid;
  box-sizing: border-box;
  margin-right: 0.5rem;
}

[type="checkbox"]:checked + label::after {
  content: '';
  display: block;
  height: 0.625em;
  width: 0.25em;
  transform: rotate(45deg);
  border-right: 0.125em green solid;
  border-bottom: 0.125em green solid;
  position: absolute;
  top: 0.125em;
  left: 0.375em;
}

[type="checkbox"]:focus + label::before {
  box-shadow:
    0 0 0 2px white,
    0 0 0 4px dodgerblue; 
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.