appearance (-moz-appearance, -webkit-appearance)

This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

The appearance CSS property is used to display an element using platform-native styling, based on the operating system's theme. The -moz-appearance and -webkit-appearance properties are non-standard versions of this propery, used (respectively) by Gecko (Firefox) and by WebKit-based (e.g., Safari) and Blink-based (e.g., Chrome, Opera) browsers to achieve the same thing. Note that Firefox and Edge also support -webkit-appearance, for compatibility reasons.

The -moz-appearance property was used in XUL stylesheets to design custom widgets with platform-appropriate styling. It was also used in the XBL implementations of the widgets that ship with the Mozilla platform. Starting with Gecko/Firefox 80, these uses were changed to -moz-default-appearance, which should never be used outside of internal stylesheets.

Compatibility 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 widely. 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;

Values

Standard keywords

Value Demo Browser Description
none Firefox Chrome Safari Edge No special styling is applied. This is the default.
auto None 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 The element is styled as a button that would indicate a menulist can be opened.
textfield Firefox Chrome Safari Edge
The following values are treated as equivalent to auto:
button Firefox Chrome Safari Edge The element is drawn like a button.
checkbox Firefox Chrome Safari Edge The element is 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 is 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 are implemented only for one or both of the prefixed properties, but not on the standard appearance property.

Value Demo 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

Obsolete values

The following values were at some point implemented for a prefixed property, but are no longer supported.

Value Browser Description
button-arrow-down Firefox Removed in Firefox 64
button-arrow-next Firefox Removed in Firefox 64
button-arrow-previous Firefox Removed in Firefox 64
button-arrow-up Firefox Removed in Firefox 64
button-focus Firefox Removed in Firefox 64
dualbutton Firefox Removed in Firefox 64
groupbox Firefox Removed in Firefox 64
menuarrow Firefox Removed in Firefox 64
menubar Firefox Removed in Firefox 64
menucheckbox Firefox Removed in Firefox 64
menuimage Firefox Removed in Firefox 64
menuitem Firefox Removed in Firefox 64.
menuitemtext Firefox Removed in Firefox 64
menupopup Firefox Removed in Firefox 64
menuradio Firefox Removed in Firefox 64
menuseparator Firefox Removed in Firefox 64
meterchunk Firefox Removed in Firefox 64.
progresschunk Firefox Removed in Firefox 64.
progresschunk-vertical Firefox Removed in Firefox 64.
radio-container Firefox Removed in Firefox 64.
radio-label Firefox Removed in Firefox 64.
radiomenuitem Firefox Removed in Firefox 64.
resizer Firefox Removed in Firefox 63
resizerpanel Firefox Removed in Firefox 63.
scrollbarbutton-down Firefox Removed in Firefox 63.
scrollbarbutton-left Firefox Removed in Firefox 63.
scrollbarbutton-right Firefox Removed in Firefox 63.
scrollbarbutton-up Firefox Removed in Firefox 63.
separator Firefox Removed in Firefox 64.
spinner Firefox Removed in Firefox 64.
spinner-downbutton Firefox Removed in Firefox 64.
spinner-textfield Firefox Removed in Firefox 64.
spinner-upbutton Firefox Removed in Firefox 64.
splitter Firefox Removed in Firefox 64.
statusbar Firefox Removed in Firefox 64.
statusbarpanel Firefox Removed in Firefox 64.
tab Firefox Removed in Firefox 64
tabpanel Firefox Removed in Firefox 64.
tabpanels Firefox Removed in Firefox 64
tab-scroll-arrow-back Firefox Removed in Firefox 64.
tab-scroll-arrow-forward Firefox Removed in Firefox 64.
toolbar Firefox Removed in Firefox 64.
toolbarbutton Firefox Removed in Firefox 64.
toolbarbutton-dropdown Firefox Removed in Firefox 64.
toolbargripper Firefox Removed in Firefox 64.
toolbox Firefox Removed in Firefox 64.
tooltip Firefox Removed in Firefox 64.
treeheader Firefox Removed in Firefox 64.
treeheadercell Firefox Removed in Firefox 64.
treeheadersortarrow Firefox Removed in Firefox 64.
treeitem Firefox Removed in Firefox 64.
treeline Firefox Removed in Firefox 64.
treetwisty Firefox Removed in Firefox 64.
treetwistyopen Firefox Removed in Firefox 64.
treeview Firefox Removed in Firefox 64.
-moz-win-borderless-glass Firefox Removed in Firefox 64.
-moz-win-browsertabbar-toolbox Firefox Removed in Firefox 64.
-moz-win-communicationstext Firefox Removed in Firefox 64.
-moz-win-communications-toolbox Firefox Removed in Firefox 64.
-moz-win-exclude-glass Firefox Removed in Firefox 64.
-moz-win-glass Firefox Removed in Firefox 64.
-moz-win-media-toolbox Firefox Removed in Firefox 64.
-moz-window-button-box Firefox Removed in Firefox 64.
-moz-window-button-box-maximized Firefox Removed in Firefox 64.
-moz-window-button-close Firefox Removed in Firefox 64.
-moz-window-button-maximize Firefox Removed in Firefox 64.
-moz-window-button-minimize Firefox Removed in Firefox 64.
-moz-window-button-restore Firefox Removed in Firefox 64.
-moz-window-frame-bottom Firefox Removed in Firefox 64.
-moz-window-frame-left Firefox Removed in Firefox 64.
-moz-window-frame-right Firefox Removed in Firefox 64.
-moz-window-titlebar Firefox Removed in Firefox 64.
-moz-window-titlebar-maximized Firefox Removed in Firefox 64.

Formal definition

Initial valueauto
Applies toall elements
Inheritedno
Computed valueas specified
Animation typediscrete

Formal syntax

none | auto | button | textfield | menulist-button | <compat-auto>

where
<compat-auto> = searchfield | textarea | push-button | slider-horizontal | checkbox | radio | square-button | menulist | listbox | meter | progress-bar

Examples

The following would make an element look like a menulist button:

.exampleone {
  appearance: menulist-button;
}

See also this JSFiddle for an example showing how you might use appearance: none to apply custom styling to radio buttons and checkboxes.

Specifications

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

Browser compatibility

DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
appearance
Experimental
Chrome Full support 84
Full support 84
Partial support 1
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Edge Full support 84
Full support 84
Partial support 12
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Firefox Partial support 1
Prefixed
Partial support 1
Prefixed
Prefixed Implemented with the vendor prefix: -moz-
Partial support 64
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Partial support 62
Prefixed Disabled
Prefixed Implemented with the vendor prefix: -webkit-
Disabled From version 62: this feature is behind the layout.css.webkit-appearance.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE No support NoOpera Full support 70
Full support 70
Partial support 15
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Safari Partial support 3
Prefixed
Partial support 3
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
WebView Android Full support 84
Full support 84
Partial support 1
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Chrome Android Full support 84
Full support 84
Partial support 18
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Firefox Android Partial support 4
Prefixed
Partial support 4
Prefixed
Prefixed Implemented with the vendor prefix: -moz-
Partial support 64
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Partial support 62
Prefixed Disabled
Prefixed Implemented with the vendor prefix: -webkit-
Disabled From version 62: this feature is behind the layout.css.webkit-appearance.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Partial support 14
Prefixed
Partial support 14
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Safari iOS Partial support 1
Prefixed
Partial support 1
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Samsung Internet Android Partial support 1.0
Prefixed
Partial support 1.0
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
auto
Experimental
Chrome Full support 83Edge Full support 83Firefox Full support 80IE No support NoOpera Full support 69Safari No support NoWebView Android Full support 83Chrome Android Full support 83Firefox Android No support NoOpera Android No support NoSafari iOS No support NoSamsung Internet Android No support No
button
Experimental
Chrome Full support 1Edge Full support 12Firefox Full support 1IE No support NoOpera Full support 15Safari Full support 3WebView Android Full support 1Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support 14Safari iOS Full support 1Samsung Internet Android Full support 1.0
<compat-auto> (compatibility values searchfield, textarea, push-button, slider-horizontal, checkbox, radio, square-button, menulist, listbox, meter, progress-bar)
Experimental
Chrome Full support 1Edge Partial support 12Firefox Full support 80
Full support 80
Partial support 1
IE No support NoOpera Full support 15Safari Full support 3WebView Android Full support ≤37Chrome Android Full support 18Firefox Android Partial support 4Opera Android Full support 14Safari iOS Full support 1Samsung Internet Android Full support 1.0
menulist-button
Experimental
Chrome Full support 1Edge Partial support 12Firefox Full support 80
Full support 80
Partial support 1
Notes
Notes See bug 1481615.
IE No support NoOpera Full support 15Safari Full support 3WebView Android Full support ≤37Chrome Android Full support 18Firefox Android Partial support 4Opera Android Full support 14Safari iOS Full support 1Samsung Internet Android Full support 1.0
none
Experimental
Chrome Full support 1Edge Full support 12Firefox Full support 54
Full support 54
Partial support 1
Notes
Notes Doesn't work with <input type="checkbox"> and <input type="radio">.
IE No support NoOpera Full support 15Safari Full support 3WebView Android Full support 1Chrome Android Full support 18Firefox Android Partial support 4
Notes
Partial support 4
Notes
Notes Doesn't work with <input type="checkbox"> and <input type="radio">.
Opera Android Full support 14Safari iOS Full support 3Samsung Internet Android Full support 1.0
textfield
Experimental
Chrome Full support 1Edge Full support 12Firefox Full support 1IE No support NoOpera Full support 15Safari Full support 3WebView Android Full support 1Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support 14Safari iOS Full support 1Samsung Internet Android Full support 1.0

Legend

Full support
Full support
Partial support
Partial support
No support
No support
Experimental. Expect behavior to change in the future.
Experimental. Expect behavior to change in the future.
See implementation notes.
See implementation notes.
User must explicitly enable this feature.
User must explicitly enable this feature.
Requires a vendor prefix or different name for use.
Requires a vendor prefix or different name for use.

See also