<input type="checkbox" class="custom-cb" />

.custom-cb {
  --_checkmark-color: var(--checkmark-color, white);
  --_bg-when-checked: var(--bg-when-checked, dodgerblue);
  appearance: none;
  width: 24px;
  height: 24px;
  border: 1px solid darkgrey;
  border-radius: 5px;
  margin: 0;
  box-sizing: border-box;
  padding: 3px;
}

.custom-cb:disabled {
  opacity: 0.5;
}

.custom-cb:checked {
  background-color: var(--_bg-when-checked);
  border-color: var(--_bg-when-checked);
}

.custom-cb:checked::before {
  content: " ";
  /* The color of the checkmark */
  background-color: var(--_checkmark-color);
  /* Fills the entire space... */
  width: 100%;
  height: 100%;
  display: block;
  /* ...but only keep what's inside the checkmark shape */
  -webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 12'%3E%3Cpath stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M1.5 5.917 5.724 10.5 14.5 1.5'/%3E%3C/svg%3E")
    no-repeat 50% 50%;
  mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 12'%3E%3Cpath stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M1.5 5.917 5.724 10.5 14.5 1.5'/%3E%3C/svg%3E")
    no-repeat 50% 50%;
}