CSS custom checkbox. Modern form design.
☑️ Preview (click)

How to use

  1. Pick style (rounded / circle / neon).
  2. Size + check mark.
  3. Colors (check / mark / border).
  4. Label text.
  5. Copy HTML+CSS.

Key features

  • 5 styles (rounded / square / circle / material / neon)
  • 4 check marks (✓ ● ✗ ＋)
  • Free size / color / speed
  • Full HTML with label
  • Live click test

Use cases

  • Signup forms — terms agreement
  • Settings — multi-check
  • Todo lists
  • Surveys — multiple choice
  • Filters — search options

Building custom checkboxes

Browser default checkboxes vary by OS (macOS/Windows/Linux). Uniform look needs (1) hide input (opacity:0) (2) draw fake box on label (3) :checked pseudo-class for state. Standard pattern.

FAQ

Accessibility?

Real input is hidden (opacity:0) but still focusable. Keyboard Tab + Space work.

Multiple?

Copy HTML, change id (cb1, cb2…) or name="" group.

Indeterminate state?

JS setAttribute('indeterminate', true). CSS-only is hard.

Free?

Yes.