🎭 CSS appearance — Complete Tutorial

🌐 What Is appearance?

The appearance property controls whether an element should use the browser’s **native UI styling** or be rendered withpure CSS styling. It is especially useful when customizing:

  • ✔ Input fields
  • ✔ Buttons
  • ✔ Select dropdowns
  • ✔ Checkboxes & radio buttons
  • ✔ Range sliders
>>“Use appearance: none to remove default browser styling and fully customize UI elements.”

Note

✔ Helps achieve consistent cross-browser designs
✔ Often paired with custom CSS for form components
✔ Requires mindful accessibility considerations

📦 Syntax

appearance syntax

appearance: auto | none;
ValueDescription
autoElement uses OS/browser default appearance (default).
noneRemoves native styling — use your own custom CSS.

📌 1. Remove Browser Default Styling

appearance: none

input,
select,
button {
  appearance: none;
}

Removes browser-level UI styles so you can apply fully custom designs.

📌 2. Custom Checkbox Using appearance: none

Custom checkbox

input[type="checkbox"] {
  appearance: none;
  width: 20px;
  height: 20px;
  border: 2px solid #333;
  border-radius: 4px;
  display: inline-block;
  cursor: pointer;
}

input[type="checkbox"]:checked {
  background: #4caf50;
  border-color: #4caf50;
}

Completely overrides native checkbox UI (combine with accent-color if needed).

📌 3. Custom Select Dropdown

Custom select

select {
  appearance: none;
  background: white;
  border: 2px solid #666;
  padding: 10px;
  border-radius: 6px;
  background-image: url("data:image/svg+xml;utf8,<svg .../>");
  background-repeat: no-repeat;
  background-position: right 10px center;
}

Allows you to replace the default dropdown arrow with your own icon.

📌 4. Custom Range Slider

Range slider

input[type="range"] {
  appearance: none;
  width: 100%;
  height: 8px;
  background: #ddd;
  border-radius: 4px;
}

input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  width: 20px;
  height: 20px;
  background: #ff5722;
  border-radius: 50%;
  cursor: pointer;
}

Native slider thumb is replaced with fully custom styling.

📌 5. Modern Buttons Without Native Styling

Custom button

button {
  appearance: none;
  padding: 12px 18px;
  background: #6200ea;
  color: white;
  border-radius: 6px;
  border: none;
  cursor: pointer;
}

Removes OS-style beveled buttons for a clean, modern UI button.

📌 6. Reset Only Specific Elements

Partial reset

input[type="search"] {
  appearance: none; /* removes search magnifier & clear button */
}

Useful for designing minimalist search bars.

🧪 Real-World Examples

1️⃣ iOS Safari Default UI Removal

Remove iOS native style

input,
button,
select {
  appearance: none;
}

Prevents rounded iOS styles from interfering with custom UI designs.

2️⃣ Fully Custom Forms (Material/UI apps)

Material style

input[type="text"] {
  appearance: none;
  border: 0;
  border-bottom: 2px solid #aaa;
  padding: 8px;
}

3️⃣ Custom Switch Toggle

Toggle switch

input[type="checkbox"].switch {
  appearance: none;
  width: 40px;
  height: 20px;
  background: #ccc;
  border-radius: 20px;
  position: relative;
  cursor: pointer;
}

input[type="checkbox"].switch:checked {
  background: #4caf50;
}

input[type="checkbox"].switch::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 2px;
  width: 16px;
  height: 16px;
  background: white;
  border-radius: 50%;
  transition: transform 0.2s;
}

input[type="checkbox"].switch:checked::before {
  transform: translateX(20px);
}

⚠️ Common Mistakes

  • ❌ Removing appearance without providing custom focus/hover styles
  • ❌ Breaking accessibility by removing native affordances
  • ❌ Forgetting to customize vendor pseudo-elements (e.g., WebKit slider thumb)

Note

When using appearance: none, **always provide visible focus styles** for accessibility and keyboard navigation.

🔥 Summary

The appearance property allows developers to remove native browser styling from form controls and fully customize their look. It is essential for building modern UI systems, design frameworks, and themeable applications.

>>“With one property, you decide whether to keep native UI or take full control.”

Learn more →MDN Docs 📘