CSS Checkbox Generator [2025]

/* CSS Checkbox Variables */
:root { /* Or apply to a specific container */
  --checkbox-size: 24px;
  --checkbox-border-color-unchecked: #a1a1aa;
  --checkbox-hover-border-color: #6366f1;
  --checkbox-hover-bg-unchecked: #f4f4f5; /* New */
  --checkbox-hover-scale: 1; /* New */
  --checkbox-border-width: 2px;
  --checkbox-border-radius: 4px;
  --checkbox-bg-unchecked: #ffffff;
  --checkbox-bg-checked: #4f46e5;
  --checkmark-color: #ffffff;
  --checkmark-weight: 3px;
  --checkbox-filled-color: #ffffff;
  --checkbox-spark-color: #4f46e5;
  --checkbox-spark-offset: calc(var(--checkbox-size) * -0.8);
  --checkbox-animation-duration: 300ms;
  --checkmark-svg-path-length: 0;
}

/* Core Checkbox Styles */
.hidden-checkbox {
  position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none;
}

.custom-checkbox {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--checkbox-size); height: var(--checkbox-size);
  border: var(--checkbox-border-width) solid var(--checkbox-border-color-unchecked);
  border-radius: var(--checkbox-border-radius);
  background-color: var(--checkbox-bg-unchecked);
  cursor: pointer; position: relative; flex-shrink: 0;
  vertical-align: middle; overflow: hidden;
  /* Base transitions */
  transition: background-color 0.15s ease-in-out,
              border-color 0.15s ease-in-out,
              transform 0.15s ease-in-out;
  transform: scale(1);
}

/* Hover State (Unchecked) */
.custom-checkbox:has(:not(:checked)):hover {
  border-color: var(--checkbox-hover-border-color);
  background-color: var(--checkbox-hover-bg-unchecked);
  transform: scale(var(--checkbox-hover-scale));
}

/* Active State */
.custom-checkbox:active {
  transform: scale(calc(var(--checkbox-hover-scale) * 0.95)); /* Adjust active scale based on hover */
}

/* Checkmark Element Base */
.custom-checkbox .checkmark {
  display: block; box-sizing: border-box; pointer-events: none;
  position: absolute; top: 50%; left: 50%;
  opacity: 0; transform-origin: center center;

  /* Style: Classic Checkmark */
  width: calc(var(--checkbox-size) * 0.5); height: calc(var(--checkbox-size) * 0.25);
  border-left: var(--checkmark-weight) solid var(--checkmark-color);
  border-bottom: var(--checkmark-weight) solid var(--checkmark-color);
  transform: translate(-50%, -60%) rotate(-45deg) scale(0.5);
  transition: opacity var(--checkbox-animation-duration) ease-in-out, transform var(--checkbox-animation-duration) ease-in-out;
}
/* --- Checked State --- */
.hidden-checkbox:checked + .custom-checkbox {
  /* Background handled by wipe/split-fill if active */
  background-color: var(--checkbox-bg-checked);
  border-color: var(--checkbox-bg-checked);

}
.hidden-checkbox:checked + .custom-checkbox .checkmark {
  opacity: 1;
  transform: translate(-50%, -60%) rotate(-45deg) scale(1);
}
/* Focus State (Accessibility) */
.hidden-checkbox:focus-visible + .custom-checkbox { outline: 2px solid Highlight; outline: 2px solid -webkit-focus-ring-color; outline-offset: 2px; }
/* Optional: Style label text */
.checkbox-label-text { margin-left: 8px; cursor: pointer; vertical-align: middle; user-select: none; }

Apply CSS globally or scoped. Use the correct HTML structure (see 'How It Works' section) for your chosen Checkmark Style.