Home / Design / CSS Checkbox Generator
CSS Checkbox Generator
Style accessible custom checkboxes — size, colours, corners and check mark — and copy the code.
Still a real checkbox: this restyles the native <input type="checkbox"> with appearance: none, so keyboard use, form submission, labels and screen readers all keep working. A visible focus ring is included for keyboard users — please keep it.
About the CSS Checkbox Generator
The CSS Checkbox Generator styles accessible custom checkboxes with your own check style — tick, cross, dot or fill — size, corner radius, border and colours, with an optional pop animation. It keeps a real checkbox underneath, so it works with keyboards and screen readers. Copy the HTML and CSS.
How to use the CSS Checkbox Generator
- Choose the check style.
- Set the size, corner radius and border width.
- Pick the checked, border and mark colours and turn on the pop animation if you like.
- Copy the HTML and CSS.
Frequently asked questions
Are custom checkboxes accessible?
These are, because they style a real <input type="checkbox">, so keyboard navigation, focus and screen readers work as normal.
Can I make round checkboxes?
Yes. Increase the corner radius until the box becomes a circle.
Do they work in forms?
Yes. Because the real checkbox is kept, the value is submitted with the form like any other checkbox.