Using `appearance-none` for Custom Input Styling

The `appearance-none` utility removes the browser's default styling for an element, like a checkbox. This allows you to build a completely custom appearance using Tailwind utilities. However, this means you are responsible for styling everything, including the checked state indicator.

1. Default Checkbox

2. Checkbox with `appearance-none` (Base for Custom Styling)

Notice how the default checkbox UI disappears. We've added some basic box styling.

3. `appearance-none` with a Pseudo-Element Placeholder for Checkmark (Conceptual)

To add a checkmark to an `appearance-none` input, you often use CSS pseudo-elements (`::before` or `::after`) or an SVG. The Tailwind CDN alone doesn't easily allow adding complex pseudo-element content styling without a `tailwind.config.js` or custom CSS. This example simulates the idea by adding a simple background change.

Addressing the Gotcha: `appearance-none` is powerful but requires you to rebuild the entire control. The `@tailwindcss/forms` plugin handles much of this complexity, providing nicely styled and customizable form elements out-of-the-box. If you don't use the plugin, you're responsible for:

  • Base state styling.
  • Checked state styling (e.g., background color changes as shown).
  • Focus state styling.
  • Disabled state styling.
  • The visual indicator (checkmark, radio dot) itself, often via SVG or pseudo-elements.
For this example, we only show a background color change on check. A full custom checkbox is more involved.