CSS - appearance



.exampleone {
  appearance: auto;


appearance: auto;
appearance: none;


<appearance> is one of the keywords in the table below.

Value Demo Description

(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:

  • all
  • bottom
  • clear
  • cursor
  • direction
  • display
  • float
  • left
  • margin
  • position
  • right
  • top
  • unicode-bidi
  • visibility 
  • z-index
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

auto | none


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
Computed valueAs specified
Canonical orderper grammar

Browser Compatibility  

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 52.0-webkit [1]     39  
Feature Android Android Webview Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile Chrome for Android
Basic support No support 52.0-webkit [1]     39   52.0-webkit [1]

[1] Applies to the <meter> element only.


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


© 2016 Mozilla Contributors
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.

CSS CSS Reference Experimental