← All Examples

Custom Checkboxes

Fully styled checkboxes using appearance:none and :checked.

Published May 19, 2026

Demo

HTML

<label class="check-label">
  <input type="checkbox"> Option label
</label>

CSS

.check-label {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  cursor: pointer;
}

input[type="checkbox"] {
  appearance: none;
  width: 20px;
  height: 20px;
  border: 2px solid #ccc;
  border-radius: 5px;
  position: relative;
  transition: border-color .2s, background .2s;
}

input[type="checkbox"]:checked {
  background: #5b4cdb;
  border-color: #5b4cdb;
}

input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 5px;
  width: 6px;
  height: 10px;
  border: 2px solid #fff;
  border-top: none;
  border-left: none;
  transform: rotate(45deg);
}

How it works

appearance:none strips all browser-default checkbox styling, leaving a blank slate. The ::after pseudo-element draws the checkmark using a rotated bordered box. The :checked selector switches the background and border color, and shows the ::after checkmark.