Tailwind CSS Appearance Cheatsheet
Complete reference for appearance utilities - remove native browser styling to create custom form elements.
Click any example to copy the code.
What is the appearance property?
The appearance CSS property controls whether an element should be styled based on the operating system's theme. Setting it to none removes all native styling, giving you a blank canvas for custom designs.
- - Select dropdowns (to add custom arrows)
- - Checkboxes (for custom check designs)
- - Radio buttons (for custom selection indicators)
- - Number inputs (to remove spinner buttons)
- - Range sliders (for fully custom styling)
Appearance Utilities
Tailwind provides two appearance utilities. Click to copy the class name.
Select Element Comparison
The most common use of appearance-none is on select dropdowns. It removes the native arrow so you can add a custom one.
Default select (with native styling)
Native browser dropdown arrow
With appearance-none
Custom arrow icon
<div class="relative">
<select class="appearance-none w-full h-12 px-4 pr-10 ...">
<option>Choose an option</option>
</select>
<div class="absolute right-3 top-1/2 -translate-y-1/2 pointer-events-none">
<svg class="w-5 h-5" ...>...</svg>
</div>
</div>Custom Select Dropdown Examples
Click any select to copy the full code. All examples use appearance-none.
Rounded Select
Underline Style
Filled Style
Gradient Border
Checkbox Comparison
Use appearance-none on checkboxes to create fully custom designs. You need to add your own checked state styling.
Default checkbox
Browser default appearance
With appearance-none
Custom design with checkmark
<input
type="checkbox"
class="appearance-none w-5 h-5 border-2 border-primary rounded
bg-base-100 checked:bg-primary checked:border-primary
relative after:content-[''] after:absolute
after:left-[6px] after:top-[2px]
after:w-[5px] after:h-[10px]
after:border-white after:border-r-2 after:border-b-2
after:rotate-45 after:opacity-0 checked:after:opacity-100"
/>Radio Button Comparison
Radio buttons can also be fully customized with appearance-none.
Default radio buttons
Browser default appearance
With appearance-none
Custom circular design
<input
type="radio"
class="appearance-none w-5 h-5 border-2 border-primary rounded-full
bg-base-100 checked:border-primary relative
after:content-[''] after:absolute
after:left-1/2 after:top-1/2
after:-translate-x-1/2 after:-translate-y-1/2
after:w-2.5 after:h-2.5 after:bg-primary
after:rounded-full after:opacity-0 checked:after:opacity-100"
/>Number Input (Remove Spinners)
Number inputs have native spinner buttons. Use appearance-none along with browser-specific CSS to remove them.
Default number input
Native spinner buttons visible
With spinners hidden
Clean, spinner-free design
Note: For number inputs, you need to target browser-specific pseudo-elements in addition to using appearance.
<input
type="number"
class="[appearance:textfield]
[&::-webkit-outer-spin-button]:appearance-none
[&::-webkit-inner-spin-button]:appearance-none"
/>Common Patterns
Custom Select with Icon
<div class="relative">
<select class="appearance-none w-full
h-12 pl-10 pr-10 rounded-lg
border border-gray-300">
<option>Option...</option>
</select>
<!-- Left icon -->
<div class="absolute left-3 top-1/2
-translate-y-1/2">
<svg>...</svg>
</div>
<!-- Right arrow -->
<div class="absolute right-3 top-1/2
-translate-y-1/2 pointer-events-none">
<svg>...</svg>
</div>
</div>Toggle Checkbox
<label class="relative inline-flex
items-center cursor-pointer">
<input type="checkbox" class="sr-only peer">
<div class="w-11 h-6 bg-gray-200 rounded-full
peer-checked:bg-blue-600
after:content-[''] after:absolute
after:top-0.5 after:left-0.5
after:bg-white after:rounded-full
after:h-5 after:w-5
after:transition-all
peer-checked:after:translate-x-5">
</div>
</label>Styled File Input
<label class="flex items-center gap-3
px-4 py-3 bg-white border rounded-lg
cursor-pointer hover:bg-gray-50">
<svg>...</svg>
<span>Choose file</span>
<input type="file"
class="hidden" />
</label>Custom Range Slider
<input type="range"
class="appearance-none w-full h-2
bg-gray-200 rounded-lg cursor-pointer
[&::-webkit-slider-thumb]:appearance-none
[&::-webkit-slider-thumb]:w-4
[&::-webkit-slider-thumb]:h-4
[&::-webkit-slider-thumb]:bg-blue-500
[&::-webkit-slider-thumb]:rounded-full
[&::-webkit-slider-thumb]:cursor-pointer"
/>Quick Reference Table
| Class | CSS | Use Case |
|---|---|---|
appearance-none | appearance: none; | Remove native styling for custom designs |
appearance-auto | appearance: auto; | Restore default browser styling |
Tip: When using appearance-none, remember to add your own focus states, hover effects, and accessibility features that the native styling would have provided.
Frequently Asked Questions
What does appearance-none do in Tailwind CSS?
The appearance-none class in Tailwind CSS removes all native browser styling from an element, allowing you to apply your own custom styles. It sets the CSS property 'appearance: none;' which is commonly used on form elements like selects, checkboxes, and radio buttons.
When should I use appearance-none?
Use appearance-none when you want to create custom-styled form elements. It's especially useful for custom dropdown selects with your own arrow icon, custom checkboxes with unique designs, styled radio buttons, and removing default spinner buttons from number inputs.
What is appearance-auto in Tailwind CSS?
The appearance-auto class restores the default browser styling to an element. It's useful when you want to reset an element that had appearance-none applied, or when conditionally showing native vs custom styling based on screen size or user preference.
Why doesn't my custom checkbox show a checkmark?
When you use appearance-none on checkboxes, you remove all native styling including the checkmark. You need to add your own checkmark using pseudo-elements (::before or ::after) or by using checked: variants in Tailwind to show different styles when checked.
Does appearance-none work on all browsers?
Yes, the appearance property is well supported in all modern browsers including Chrome, Firefox, Safari, and Edge. However, some browser-specific pseudo-elements (like number input spinners) may need additional CSS to be fully hidden.
How do I remove the arrow from a select dropdown?
Add the appearance-none class to your select element. This removes the native dropdown arrow. Then wrap the select in a relative container and add your own custom arrow icon positioned absolutely on the right side with pointer-events-none so clicks pass through to the select.
Explore more Tailwind tools
Tailwind Grid Generator
Create grid layouts visually
Tailwind Flexbox Generator
Create flex layouts visually
Tailwind Gradient Generator
Create custom gradients
Tailwind Text Gradient
Gradient text effects
Tailwind Gradients Collection
275+ ready-to-use gradients
Tailwind Colors
Complete 240+ color palette
Tailwind Box Shadow Generator
Design multi-layer shadows
Tailwind Text Shadow
Add depth to text with shadows
Tailwind Filter Generator
Apply blur, brightness & more
Tailwind Transform Generator
Rotate, scale & translate elements
Tailwind Animation Generator
Create built-in & custom animations
Tailwind Transition Generator
Smooth hover transitions
Tailwind Config Generator
Generate your config file
Tailwind Input Generator
Design form inputs visually
Tailwind Class Sorter
Organize classes in order
Flexbox Cheatsheet
All flex utilities visualized
Overflow Cheatsheet
Control content overflow