appearance
appearance
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 value | auto |
---|---|
Applies to | all elements |
Inherited | no |
Media | all |
Computed value | As specified |
Animation type | discrete |
Canonical order | per 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.
© 2005–2017 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/appearance