{{SeeCompatTable}} {{CSSRef}}
The appearance
CSS property indicates whether to display an element using platform-native styling based on the operating system's theme or not.
{{cssinfo}}
Syntax
appearance: auto; appearance: none;
Values
<appearance>
is one of the keywords in the table below.
Value | Demo | Description |
---|---|---|
auto |
(Default) The user agent may render form controls using native controls of the host operating system. When computing auto, the user agent must still honor the following properties:
|
|
none |
Form controls are not made to look like native controls. The element is rendered following the usual rules of CSS. No other replaced elements other than form controls are affected. |
Formal syntax
{{csssyntax}}
Examples
.exampleone { appearance: auto; }
Specifications
Specification | Status | Comment |
---|---|---|
{{SpecName('CSS3 Basic UI 4','#propdef-appearance','appearance')}} | {{Spec2('CSS3 Basic UI 4')}} | Initial definition. |
Browser compatibility
{{CompatibilityTable}}
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|
Basic support | {{CompatChrome(52.0)}}{{property_prefix("-webkit")}} [1] | 39 |
Feature | Android | Android Webview | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile | Chrome for Android |
---|---|---|---|---|---|---|---|
Basic support | {{CompatNo}} | {{CompatChrome(52.0)}}{{property_prefix("-webkit")}} [1] | 39 | {{CompatChrome(52.0)}}{{property_prefix("-webkit")}} [1] |
[1] Applies to the <meter>
element only.