This is an experimental technology
Because this technology's specification has not stabilized, check the compatibility table for usage in various browsers. Also note that the syntax and behavior of an experimental technology is subject to change in future versions of browsers as the specification changes.

The appearance CSS property indicates whether to display an element using platform-native styling based on the operating system's theme or not.

Initial valueauto
Applies toall elements
Inheritedno
Mediaall
Computed valueas specified
Animation typediscrete
Canonical orderper grammar

Syntax

/* Keyword values */
appearance: auto;
appearance: none;

/* Global values */
appearance: inherit;
appearance: initial;
appearance: unset;

Values

auto
The user agent may render form controls using native controls of the host operating system or with a look and feel not otherwise expressible in CSS. On form control elements where the computed value is auto UAs may disregard some CSS properties to ensure that the intended appearance is preserved, or because these properties may not be meaningful for the chosen appearance. However, the following properties must still be honored:
none
Form controls are not made to look like native controls, making them non-replaced elements. The element is rendered following the usual rules of CSS.  No other replaced elements other than form controls are affected.

Formal syntax

auto | none

Example

HTML content

<div>
  <p>With default appearance</p>
  <input />
  <input type="checkbox" />
  <input type="radio">
  <select>
    <option value="1">Option 1</option>
  </select> 
</div>

<div>
  <p>With <code>appearance: none;</code></p>
  <input class="no-appearance" />
  <input type="checkbox" class="no-appearance" />
  <input type="radio" class="no-appearance" />
  <select class="no-appearance">
    <option value="1">Option 1</option>
  </select>
</div>

CSS content

.no-appearance {
 appearance: none;
 -moz-appearance: none;
 -webkit-appearance: none;
}

Result

Specifications

Specification Status Comment
CSS Basic User Interface Module Level 4
The definition of 'appearance' in that specification.
Working Draft Initial definition

Browser compatibility

Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 1.0-webkit[1] 20 (12.10240)-webkit[2] 1.0 (1.7 or earlier)-moz[3]
54.0 (54.0)[4]
No support 15-webkit[1] 3.0-webkit[1]
auto No support No support 54.0 (54.0) No support No support No support
Feature Android Android Webview Chrome for Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support (Yes) (Yes)-webkit[1] (Yes)-webkit (Yes)-moz[3]
54.0 (54.0)[4]
11[2] 37 (Yes)-webkit[1]
auto No support No support No support 54.0 (54.0) No support No support No support

[1] WebKit and Blink also support a -webkit-appearance property supporting the standardized none value and additional vendor specific values.

[1] Gecko also supports a -moz-appearance property supporting the standardized none value and additional vendor specific values. It also supports -webkit-appearance as an alias to -moz-appearance for compatibility reasons.

[3] Edge and IE Phone also support a -webkit-appearance property for web compatibility supporting the standardized none value and additional vendor specific values.

[4] Put this property behind the preference layout.css.appearance.enabled and the -moz-appearance property behind the preference layout.css.moz-appearance.enabled, both defaulting to true, and added a -webkit prefixed alias for the appearance property.

Document Tags and Contributors

 Contributors to this page: chrisdavidmills, Sebastianz, PushpitaPikuDey, jpmedley
 Last updated by: chrisdavidmills,