appearance

appearance

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

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:

• all
• bottom
• appearance
• clear
• cursor
• direction
• display
• float
• left
• margin and related long-hand properties
• position
• right
• top
• unicode-bidi
• visibility
• z-index

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

Browser compatibility

[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.