CSS Checkbox Generator
Custom-styled checkboxes and radio buttons that stay accessible.
About this tool
Set the size, checkbox radius, border width, check mark style (tick, filled square or cross) and colours. The live preview shows two checkboxes and two radios you can click. Copy the CSS and HTML.
Styling checkboxes without breaking them
Older custom-checkbox techniques hid the real input and drew a fake one with spans, which often broke keyboard use, labels or screen readers. Today appearance: none lets you restyle the native <input type="checkbox"> and <input type="radio"> directly. The generator removes the default look, sets size, border and radius, and uses display: grid with place-content: center to centre a ::before pseudo-element that draws the mark. That's a rotated border for a tick, a filled square, crossed gradients for an ✕, or a scaled dot for radios. Because the real input remains, label clicks, Space to toggle, arrow keys between radios, required validation, form submission and screen-reader announcements all keep working. The CSS adds a :focus-visible ring, a disabled style, and a forced-colors fallback that restores the system control in Windows High Contrast mode, where custom colours are overridden. Honest limits: keep visible labels and make sure the unchecked border contrasts at least 3:1 with the background (WCAG 1.4.11). If you only want to recolour the native control, the one-line accent-color property is simpler. Very old browsers don't support pseudo-elements on inputs. The CSS toggle switch generator, the CSS button generator and the contrast checker are related.
Frequently asked questions
How do I style a checkbox with CSS?
Use appearance: none on the input, then style it and draw the tick with ::before. The generator writes it all.
Is accent-color enough?
For just changing the colour, yes. For custom size, shape or mark, use appearance: none.
Are custom checkboxes accessible?
Yes, when they keep the native input, have labels, a focus style and enough contrast, as generated here.
Is anything stored or sent?
No. Everything is generated in your browser and nothing is stored or sent.