appearance
==========

The **`appearance`** CSS property is used to display UI elements with platform-specific styling, based on the operating system's theme.

Try it
------

Before standardization, this property allowed elements to be shown as widgets, such as buttons or check boxes. It was considered a misfeature and authors are encouraged to use only standard keywords now.

**Note:** If you wish to use this property on websites, you should test it very carefully. Although it is supported in most modern browsers, its implementation varies. In older browsers, even the keyword `none` does not have the same effect on all form elements across different browsers, and some do not support it at all. The differences are smaller in the newest browsers.

Syntax
------


```css
/\* CSS Basic User Interface Module Level 4 values \*/
appearance: none;
appearance: auto;
appearance: menulist-button;
appearance: textfield;

/\* Global values \*/
appearance: inherit;
appearance: initial;
appearance: revert;
appearance: revert-layer;
appearance: unset;

/\* <compat-auto> values have the same effect as 'auto' \*/
appearance: button;
appearance: checkbox;
```

### Values

 For the following keywords, the user agent selects the appropriate styling based on the element.
 Some examples are provided, but the list is not exhaustive.

`none`

Hides certain features of widgets, such as arrow displayed in select element, indicating that list can be expanded.

`auto`

Acts as `none` on elements with no special styling.

`<compat-special>`

 One of `menulist-button` or `textfield`.
 Both of these values are equivalent to `auto` on elements with no special styling.


`<compat-auto>`

 Possible values are `button`, `checkbox`, `listbox`, `menulist`, `meter`, `progress-bar`, `push-button`, `radio`, `searchfield`, `slider-horizontal`, `square-button`, and `textarea`.
 Keywords which are the equivalent of `auto` for maintaining compatibility with older browsers.


#### Non-standard values

The following values may be operational on historical browser versions using **`-moz-appearance`** or **`-webkit-appearance`** prefix, but not on the standard **`appearance`** property.

Non-standard values
* Firefox entries indicate support using `-moz-appearance`.
* Chrome, Edge and Safari entries below indicate release version support for values used with the `-webkit-appearance` vendor-prefix property.
* Values with an asterisk (\*) have clear intents for removal.
* For each cell of browser version and value:
    + `Y{version}`: indicates a value is supported up to and including `{version}`
    + `N{version}`: support was removed in a release earlier than `{version}`
    + a blank cell indicates that support was never added

| Value | Safari | Firefox | Chrome | Edge |
| --- | --- | --- | --- | --- |
| `attachment` | Y(13.1) |  |  |  |
| `borderless-attachment` | Y(13.1) |  |  |  |
| `button-bevel` | Y(13.1) | N(75) |  | N(80) |
| `caps-lock-indicator` | Y(13.1) |  |  | N(80) |
| `caret` | Y(13.1) | N(75) | Y(73) | N(80) |
| `checkbox-container` |  | N(75) |  |  |
| `checkbox-label` |  | N(75) |  |  |
| `checkmenuitem` |  | N(75) |  |  |
| `color-well` | Y(13.1) |  |  |  |
| `continuous-capacity-level-indicator` | Y(13.1) |  |  |  |
| `default-button` | Y(13.1) |  |  | N(80) |
| `discrete-capacity-level-indicator` | Y(13.1) |  |  |  |
| `inner-spin-button` | Y(13.1) | N(75) | Y(118) \* | Y(119) |
| `image-controls-button` | Y(13.1) |  |  |  |
| `list-button` | Y(13.1) |  |  |  |
| `listitem` | Y(13.1) | N(75) | Y(73) | N(80) |
| `media-enter-fullscreen-button` | Y(13.1) |  | Y(73) |  |
| `media-exit-fullscreen-button` | Y(13.1) |  | Y(73) |  |
| `media-fullscreen-volume-slider` | Y(13.1) |  |  |  |
| `media-fullscreen-volume-slider-thumb` | Y(13.1) |  |  |  |
| `media-mute-button` | Y(13.1) |  |  | N(80) |
| `media-play-button` | Y(13.1) |  |  | N(80) |
| `media-overlay-play-button` | Y(13.1) |  | Y(73) |  |
| `media-return-to-realtime-button` | Y(13.1) |  |  |  |
| `media-rewind-button` | Y(13.1) |  |  |  |
| `media-seek-back-button` | Y(13.1) |  | N(73) |  |
| `media-seek-forward-button` | Y(13.1) |  | N(73) |  |
| `media-toggle-closed-captions-button` | Y(13.1) |  | Y(73) |  |
| `media-slider` | Y(13.1) |  | Y(117) | Y(80) |
| `media-sliderthumb` | Y(13.1) |  | Y(117) | Y(80) |
| `media-volume-slider-container` | Y(13.1) |  | Y(73) |  |
| `media-volume-slider-mute-button` | Y(13.1) |  |  |  |
| `media-volume-slider` | Y(13.1) |  | Y(117) | Y(80) |
| `media-volume-sliderthumb` | Y(13.1) |  | Y(117) | Y(80) |
| `media-controls-background` | Y(13.1) |  | Y(73) |  |
| `media-controls-dark-bar-background` | Y(13.1) |  |  |  |
| `media-controls-fullscreen-background` | Y(13.1) |  | Y(73) |  |
| `media-controls-light-bar-background` | Y(13.1) |  |  |  |
| `media-current-time-display` |  |  | Y(73) |  |
| `media-time-remaining-display` | Y(13.1) |  | Y(73) |  |
| `menulist-text` | Y(13.1) | N(75) | Y(73) | N(80) |
| `menulist-textfield` | Y(13.1) | N(75) | Y(73) | N(80) |
| `meterbar` |  | Y(100) |  |  |
| `number-input` |  | Y(75) |  |  |
| `progress-bar-value` | Y(13.1) |  | Y(73) |  |
| `progressbar` |  | Y(100) |  |  |
| `progressbar-vertical` |  | Y(75) |  |  |
| `range` |  | Y(75) |  |  |
| `range-thumb` |  | Y(75) |  |  |
| `rating-level-indicator` | Y(13.1) |  |  |  |
| `relevancy-level-indicator` | Y(13.1) |  |  |  |
| `scale-horizontal` |  | Y(75) |  |  |
| `scalethumbend` |  | Y(75) |  |  |
| `scalethumb-horizontal` |  | Y(75) |  |  |
| `scalethumbstart` |  | Y(75) |  |  |
| `scalethumbtick` |  | Y(75) |  |  |
| `scalethumb-vertical` |  | Y(75) |  |  |
| `scale-vertical` |  | Y(75) |  |  |
| `scrollbarthumb-horizontal` |  | Y(75) |  |  |
| `scrollbarthumb-vertical` |  | Y(75) |  |  |
| `scrollbartrack-horizontal` |  | Y(75) |  |  |
| `scrollbartrack-vertical` |  | Y(75) |  |  |
| `searchfield-decoration` | Y(13.1) |  |  | N(80) |
| `searchfield-results-decoration` | Y(13.1) | N(75) | N(73) | N(80) |
| `searchfield-results-button` | Y(13.1) |  |  | N(80) |
| `searchfield-cancel-button` | Y(13.1) | N(75) | Y(118) \* | Y(119) |
| `snapshotted-plugin-overlay` | Y(13.1) |  |  |  |
| `sheet` |  |  |  |  |
| `slider-vertical` |  |  | Y(118) \* | Y(119) |
| `sliderthumb-horizontal` |  |  | Y(117) | Y(80) |
| `sliderthumb-vertical` |  |  | Y(117) | Y(80) |
| `textfield-multiline` |  | Y(100) |  |  |
| `-apple-pay-button` | Y(13.1) |  |  |  |

Formal definition
-----------------

|  |  |
| --- | --- |
| Initial value | `none` |
| Applies to | all elements |
| Inherited | no |
| Computed value | as specified |
| Animation type | discrete |

Formal syntax
-------------
```

appearance =   
  none              |  
  auto              |  
  <compat-auto>     |  
  <compat-special>    
  
<compat-auto> =   
  searchfield   |  
  textarea      |  
  checkbox      |  
  radio         |  
  menulist      |  
  listbox       |  
  meter         |  
  progress-bar  |  
  button          
  
<compat-special> =   
  textfield        |  
  menulist-button    
  
```

Examples
--------

### Apply custom styling

 The following example shows how to remove the default styling from a checkbox and select element, and apply custom styling.
 The appearance of the checkbox is changed to a circle, and the select element shows how to remove the arrow indicating that the list can be expanded.

#### HTML


```html
<input type="checkbox" />
<input type="checkbox" checked />

<select>
  <option>default</option>
  <option>option 2</option>
</select>
<select class="none">
  <option>appearance: none</option>
  <option>option 2</option>
</select>
```


#### CSS


```css
input {
  appearance: none;
  width: 1em;
  height: 1em;
  display: inline-block;
  background: red;
}
input:checked {
  border-radius: 50%;
  background: green;
}

select {
  border: 1px solid black;
  font-size: 1em;
}

select.none {
  appearance: none;
}
```


#### Result

Specifications
--------------

| Specification |
| --- |
| CSS Basic User Interface Module Level 4 # appearance-switching |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `prefers-color-scheme`