W3cubDocs

/CSS

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
Animatable discrete
Canonical order per grammar

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:

  • 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

Examples

.exampleone {
  appearance: auto;
}

Specifications

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

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.

Edit this page on MDN

© 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