appearance-none
To overcome the limitations of styling native checkboxes, you can use the
appearance-none
utility.
This removes the browser's default styling for the input, allowing you to build your own checkbox look using other Tailwind classes.
Here,
appearance-none
is applied. We then style the base state and the
checked:
state.
A more complex custom checkmark (like an SVG icon) could be added.
The same
appearance-none
principle applies to radio buttons. Here, we make it round.
Using
appearance-none
gives you full control but requires you to define all visual states (unchecked, checked, focused, disabled, etc.) yourself.