CSS Checkbox Generator

.checkbox-custom {
  appearance: none;
  -webkit-appearance: none;
  width: 24px;
  height: 24px;
  border: 2px solid #d1d5db;
  border-radius: 4px;
  cursor: pointer;
  position: relative;
  transition: all 0.2s;
}
.checkbox-custom:checked {
  background-color: #6366f1;
  border-color: #6366f1;
}
.checkbox-custom:checked::after {
  content: '';
  position: absolute;
  left: 7.199999999999999px;
  top: 1.2000000000000002px;
  width: 6px;
  height: 12px;
  border: solid white;
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
}
.checkbox-custom:hover {
  border-color: #6366f1;
}