Build a custom checkbox with CSS-only checkmark — accent & size control. Part of the DevTools Surf developer suite. Browse more tools in the CSS collection.
Use Cases
Frontend developers replacing default browser checkboxes with branded styles
Designers creating custom checkbox designs for forms and settings
Mobile developers building touch-friendly checkbox targets with proper sizing
Tips
Control checkmark size and accent color for brand-consistent checkboxes
The custom checkbox uses CSS-only techniques — no JavaScript needed
Adjust the checkbox dimensions to meet touch target size guidelines
Fun Facts
Native HTML checkbox styling was essentially impossible until CSS appearance: none gained browser support around 2020, allowing developers to fully override default OS styles.
The checkmark symbol (✓) originates from the Roman letter 'V' for 'veritas' (truth) — it has been used as a mark of approval since at least the 17th century.
Apple's Human Interface Guidelines recommend a minimum 44x44 pixel touch target for checkboxes on mobile — most default browser checkboxes are only 13x13 pixels.
FAQ
Does it hide the native checkbox correctly?
Yes — uses `appearance: none` with a custom :checked state. The native element is still in the DOM for keyboard and screen-reader access.
How do I add a checkmark?
Pure CSS via a pseudo-element with border-left and border-bottom (creating an L shape) and a rotate. No SVG or image needed.
Does it size well on mobile?
Default size is 24px × 24px which meets touch-target guidelines. Increase to 32px for primary actions if needed.
What about indeterminate state?
CSS supports `:indeterminate` pseudo-class but it's set via JavaScript (checkbox.indeterminate = true). The tool includes styles for that state if you need it.
