appearance

appearance controls a form widget’s platform-native rendering. Appearance:none removes some native styling while preserving the real element’s behavior; it does not turn a generic div into a checkbox or button.

Style a native button

The button still activates with a pointer, Enter, or Space. Its custom border, background, and visible focus indicator replace the native appearance.

<button type="button" onclick="this.textContent='Saved'">Save example</button>

button {
  appearance: none;
  min-height: 44px;
  padding: 0.75rem 1rem;
  border: 2px solid #1d4ed8;
  background: #eff6ff;
  color: #172554;
  border-radius: 0.4rem;
}
button:focus-visible {
  outline: 3px solid #2563eb;
  outline-offset: 3px;
}

Keep a select’s native behavior

This select uses auto rather than removing its arrow or picker appearance. Spacing and typography can still be adjusted; the associated label gives it a name.

<label for="topic">Choose a topic</label
><select id="topic" name="topic">
  <option>HTML</option>
  <option>CSS</option>
</select>

select {
  appearance: auto;
  font: inherit;
  padding: 0.5rem;
  min-height: 44px;
}
select:focus-visible {
  outline: 3px solid #2563eb;
  outline-offset: 2px;
}

Values and defaults

The initial value is none and the property is not inherited. Browser styles usually assign auto to native widgets. Auto renders the applicable native appearance; on a non-widget it does not manufacture a widget.

Legacy compatibility keywords generally behave like auto. Newer base-select enables a customizable select/picker and has different support from auto or none. Do not assume that support for appearance means support for every keyword. Retain an ordinary select fallback when using newer features.

Common mistakes

Removing checkbox or radio appearance can make the control invisible unless checked, unchecked, focus, disabled, and forced-color states are all supplied. Prefer accent-color when only the native control’s color needs to change. Appearance alone does not guarantee identical cross-platform controls.

Current MDN compatibility data distinguishes unprefixed and older prefixed support. Test the actual browser and control, including labels and keyboard operation.

Sources and browser support

MDN: appearance describes the syntax and links to the specification and compatibility data. Check individual values in that table when supporting older browsers.