W3cubDocs

/CSS

appearance

The appearance CSS property is used to control native appearance of UI controls, that are based on operating system's theme.

Try it

Before standardization this property allowed simple 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 Basic User Interface Module Level 4 values */
appearance: none;
appearance: auto;
appearance: menulist-button;
appearance: textfield;

/* "Compat-auto" values, which have the same effect as 'auto' */
appearance: button;
appearance: searchfield;
appearance: textarea;
appearance: push-button;
appearance: slider-horizontal;
appearance: checkbox;
appearance: radio;
appearance: square-button;
appearance: menulist;
appearance: listbox;
appearance: meter;
appearance: progress-bar;

/* Partial list of available values in Gecko */
-moz-appearance: scrollbarbutton-up;
-moz-appearance: button-bevel;

/* Partial list of available values in WebKit/Blink (as well as Gecko and Edge) */
-webkit-appearance: media-mute-button;
-webkit-appearance: caret;

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

Values

Standard keywords

Value	Browser	Description
`none`	Firefox Chrome Safari Edge	Hides certain features of widgets, such as arrow displayed in select element, indicating that list can be expanded.
`auto`	Firefox Chrome Edge	The user agent selects the appropriate special styling based on the element. Acts as `none` on elements with no special styling.
`menulist-button`	Firefox Chrome Safari Edge
`textfield`	Firefox Chrome Safari Edge
The following values are treated as equivalent to `auto`:
`button`	Firefox Chrome Safari Edge	The element used to be drawn like a button.
`checkbox`	Firefox Chrome Safari Edge	The element used to be drawn like a checkbox, including only the actual "checkbox" portion.
`listbox`	Firefox Chrome Safari Edge
`menulist`	Firefox Chrome Safari Edge
`meter`	Chrome Safari Firefox
`progress-bar`	Chrome Safari Firefox
`push-button`	Chrome Safari Edge
`radio`	Firefox Chrome Safari Edge	The element used to be drawn like a radio button, including only the actual "radio button" portion.
`searchfield`	Firefox Chrome Safari Edge
`slider-horizontal`	Chrome Safari Edge
`square-button`	Chrome Safari Edge
`textarea`	Firefox Chrome Safari Edge

Non-standard keywords

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

Value	Browser	Description
`attachment`	Safari
`borderless-attachment`	Safari
`button-bevel`	Firefox Chrome Safari Edge
`caps-lock-indicator`	Safari Edge
`caret`	Firefox Chrome Safari Edge
`checkbox-container`	Firefox	The element is drawn like a container for a checkbox, which may include a prelighting background effect under certain platforms. Normally it would contain a label and a checkbox.
`checkbox-label`	Firefox
`checkmenuitem`	Firefox
`color-well`	Safari	`input type=color`
`continuous-capacity-level-indicator`	Safari
`default-button`	Safari Edge
`discrete-capacity-level-indicator`	Safari
`inner-spin-button`	Firefox Chrome Safari
`image-controls-button`	Safari
`list-button`	Safari	datalist
`listitem`	Firefox Chrome Safari Edge
`media-enter-fullscreen-button`	Chrome Safari
`media-exit-fullscreen-button`	Chrome Safari
`media-fullscreen-volume-slider`	Safari
`media-fullscreen-volume-slider-thumb`	Safari
`media-mute-button`	Chrome Safari Edge
`media-play-button`	Chrome Safari Edge
`media-overlay-play-button`	Chrome Safari
`media-return-to-realtime-button`	Safari
`media-rewind-button`	Safari
`media-seek-back-button`	Safari Edge
`media-seek-forward-button`	Safari Edge
`media-toggle-closed-captions-button`	Chrome Safari
`media-slider`	Chrome Safari Edge
`media-sliderthumb`	Chrome Safari Edge
`media-volume-slider-container`	Chrome Safari
`media-volume-slider-mute-button`	Safari
`media-volume-slider`	Chrome Safari
`media-volume-sliderthumb`	Chrome Safari
`media-controls-background`	Chrome Safari
`media-controls-dark-bar-background`	Safari
`media-controls-fullscreen-background`	Chrome Safari
`media-controls-light-bar-background`	Safari
`media-current-time-display`	Chrome Safari
`media-time-remaining-display`	Chrome Safari
`menulist-text`	Firefox Chrome Safari Edge
`menulist-textfield`	Firefox Chrome Safari Edge	The element is styled as the text field for a menulist. (Not implemented for the Windows platform)
`meterbar`	Firefox	Use `meter` instead.
`number-input`	Firefox
`progress-bar-value`	Chrome Safari
`progressbar`	Firefox	The element is styled like a progress bar. Use `progress-bar` instead
`progressbar-vertical`	Firefox
`range`	Firefox
`range-thumb`	Firefox
`rating-level-indicator`	Safari
`relevancy-level-indicator`	Safari
`scale-horizontal`	Firefox
`scalethumbend`	Firefox
`scalethumb-horizontal`	Firefox
`scalethumbstart`	Firefox
`scalethumbtick`	Firefox
`scalethumb-vertical`	Firefox
`scale-vertical`	Firefox
`scrollbarthumb-horizontal`	Firefox
`scrollbarthumb-vertical`	Firefox
`scrollbartrack-horizontal`	Firefox
`scrollbartrack-vertical`	Firefox
`searchfield-decoration`	Safari Edge
`searchfield-results-decoration`	Chrome Safari Edge	(Works on Chrome 51 on Windows 7)
`searchfield-results-button`	Safari Edge
`searchfield-cancel-button`	Chrome Safari Edge
`snapshotted-plugin-overlay`	Safari
`sheet`	None
`slider-vertical`	Chrome Safari Edge
`sliderthumb-horizontal`	Chrome Safari Edge
`sliderthumb-vertical`	Chrome Safari Edge
`textfield-multiline`	Firefox	Use `textarea` instead.
`-apple-pay-button`	Safari	iOS and macOS only. Available on the web starting in iOS 10.1 and macOS 10.12.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           |
  push-button        |
  slider-horizontal  |
  checkbox           |
  radio              |
  square-button      |
  menulist           |
  listbox            |
  meter              |
  progress-bar       |
  button             

<compat-special> = 
  textfield        |
  menulist-button

Examples

Make an element look like a menulist button

.exampleone {
  -webkit-appearance: menulist-button;
  -moz-appearance: menulist-button;
  appearance: menulist-button;
}

Apply custom styling

HTML

<select class="none">
  <option>appearance: none</option>
</select>
<select class="auto">
  <option>appearance: auto</option>
</select>

CSS

.none {
  appearance: none;
}
.auto {
  appearance: auto;
}

Result

Specifications

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

Browser compatibility

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	WebView Android	Chrome Android	Firefox for Android	Opera Android	Safari on IOS	Samsung Internet
`appearance`	841	8412	80641	No	7015	15.43	844.4	8418	80644	6014	15.41	14.01.0
`auto`	83	83	80	No	69	15.4	83	83	80	59	15.4	13.0
`compat-auto`	1	12	1	No	15	3	4.4	18	4	14	1	1.0
`menulist-button`	1	12	80 1 See bug 1481615.	No	15	3	4.4	18	80 4 See bug 1481615.	14	1	1.0
`none`	1	12	54 1 Doesn't work with `<input type="checkbox">` and `<input type="radio">`.	No	15	3	4.4	18	54 4 Doesn't work with `<input type="checkbox">` and `<input type="radio">`.	14	3	1.0
`textfield`	1	12	1	No	15	3	4.4	18	4	14	1	1.0