CSS: appearance

The appearance property controls whether a form control keeps its native platform styling or uses author-defined styling.

What you will learn

How auto and none affect native appearance
Why controls need an explicit focus style after customization
How to keep the control usable across browsers

Minimal example

.custom-button {
  appearance: none;
  border: 1px solid currentColor;
  border-radius: .5rem;
  padding: .5rem 1rem;
}

.custom-button:focus-visible {
  outline: 3px solid #06c;
  outline-offset: 2px;
}

Removing native styling does not create a complete button design. Add clear states for focus, hover, disabled, and high-contrast environments.

Common mistakes

Do not remove the focus indicator without replacing it with a visible equivalent.
Prefer semantic button and input elements rather than recreating their behavior with generic elements.
Test the result across browsers and operating-system themes; native controls provide useful platform affordances.