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

The -moz-appearance CSS property is used in Gecko (Firefox) to display an element using platform-native styling based on the operating system's theme.

The -webkit-appearance property is used by WebKit-based (e.g., Safari) and Blink-based (e.g., Chrome, Opera) browsers to achieve the same thing. Note that Firefox, as of Firefox 63 (beta only for now), and Edge also support -webkit-appearance, for compatibility reasons.

This property is frequently used in XUL stylesheets to design custom widgets with platform-appropriate styling. It is also used in the XBL implementations of the widgets that ship with the Mozilla platform.

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;

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

/* Partial list of available values in WebKit/Blink (as well as Gecko and Edge) */
-webkit-appearance: none;
-webkit-appearance: button;
-webkit-appearance: checkbox;
-webkit-appearance: scrollbarbutton-up;

The -moz-appearance property may be specified as a single value chosen from the list below.

Values

<appearance> is one of the following 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.
attachment Safari  
borderless-attachment Safari  
button Firefox Chrome Safari Edge The element is drawn like a button.
button-arrow-down Firefox  
button-arrow-next Firefox  
button-arrow-previous Firefox  
button-arrow-up Firefox  
button-bevel Firefox Chrome Safari Edge  
button-focus Firefox  
caps-lock-indicator Safari Edge  
caret Firefox Chrome Safari Edge  
checkbox Firefox Chrome Safari Edge The element is drawn like a checkbox, including only the actual "checkbox" portion.
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  
dualbutton Firefox  
groupbox Firefox  
inner-spin-button Firefox Chrome Safari  
image-controls-button Safari  
list-button Safari datalist
listbox Firefox Chrome Safari Edge  
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  
menuarrow Firefox  
menubar Firefox  
menucheckbox Firefox  
menuimage Firefox  
menuitem Firefox The element is styled as menu item, item is highlighted when hovered.
menuitemtext Firefox  
menulist Firefox Chrome Safari Edge  
menulist-button Firefox Chrome Safari Edge The element is styled as a button that would indicate a menulist can be opened.
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)
menupopup Firefox  
menuradio Firefox  
menuseparator Firefox  
meter Chrome Safari  
meterbar Firefox New in Fx 16.
meterchunk Firefox New in Fx 16
number-input   Firefox  
progress-bar Chrome Safari  
progress-bar-value Chrome Safari  
progressbar Firefox The element is styled like a progress bar.
progressbar-vertical Firefox  
progresschunk Firefox  
progresschunk-vertical 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.
radio-container Firefox The element is drawn like a container for a radio button, which may include a prelighting background effect under certain platforms. Normally it would contain a label and a radio button.
radio-label Firefox  
radiomenuitem Firefox  
range Firefox  
range-thumb Firefox  
rating-level-indicator Safari  
resizer Firefox  
resizerpanel Firefox  
scale-horizontal Firefox  
scalethumbend Firefox  
scalethumb-horizontal Firefox  
scalethumbstart Firefox  
scalethumbtick Firefox  
scalethumb-vertical Firefox  
scale-vertical Firefox  
scrollbarbutton-down Firefox  
scrollbarbutton-left Firefox  
scrollbarbutton-right Firefox  
scrollbarbutton-up Firefox  
scrollbarthumb-horizontal Firefox  
scrollbarthumb-vertical Firefox  
scrollbartrack-horizontal Firefox  
scrollbartrack-vertical Firefox  
searchfield Firefox Chrome Safari Edge  
searchfield-decoration Safari Edge  
searchfield-results-decoration Safari Edge  
searchfield-results-button Safari Edge  
searchfield-cancel-button Chrome Safari Edge  
snapshotted-plugin-overlay Safari  
separator Firefox  
sheet None  
slider-horizontal Chrome Safari Edge  
slider-vertical Chrome Safari Edge  
sliderthumb-horizontal Chrome Safari Edge  
sliderthumb-vertical Chrome Safari Edge  
spinner Firefox  
spinner-downbutton Firefox  
spinner-textfield Firefox  
spinner-upbutton Firefox  
splitter Firefox  
square-button Chrome Safari Edge  
statusbar Firefox  
statusbarpanel Firefox  
tab Firefox  
tabpanel Firefox  
tabpanels Firefox  
tab-scroll-arrow-back Firefox  
tab-scroll-arrow-forward Firefox  
textarea Chrome Safari Edge  
textfield Firefox Chrome Safari Edge  
textfield-multiline Firefox  
toolbar Firefox  
toolbarbutton Firefox  
toolbarbutton-dropdown Firefox  
toolbargripper Firefox  
toolbox Firefox  
tooltip Firefox  
treeheader Firefox  
treeheadercell Firefox  
treeheadersortarrow Firefox  
treeitem Firefox  
treeline Firefox  
treetwisty Firefox  
treetwistyopen Firefox  
treeview Firefox  
relevancy-level-indicator Safari  
-moz-win-borderless-glass Firefox Windows Vista and later only. This style applies the Aero Glass effect -- but without a border -- to the element.
-moz-win-browsertabbar-toolbox Firefox Windows Vista and later only. This toolbox style is meant to be used for the tab bar in a browser.
-moz-win-communicationstext Firefox  
-moz-win-communications-toolbox Firefox Windows Vista and later only. This toolbox style is meant to be used in communications and productivity applications. Corresponding foreground color is -moz-win-communicationstext.
-moz-win-exclude-glass Firefox Windows Vista and later only. This styles is used to exclude the Aero Glass effect on the element.
-moz-win-glass Firefox Windows Vista and later only. This style applies the Aero Glass effect to the element.
-moz-win-mediatext Firefox  
-moz-win-media-toolbox Firefox Windows Vista and later only. This toolbox style is meant to be used in applications that manage media objects. Corresponding foreground color is -moz-win-mediatext.
-moz-window-button-box Firefox  
-moz-window-button-box-maximized Firefox  
-moz-window-button-close Firefox  
-moz-window-button-maximize Firefox  
-moz-window-button-minimize Firefox  
-moz-window-button-restore Firefox  
-moz-window-frame-bottom Firefox  
-moz-window-frame-left Firefox  
-moz-window-frame-right Firefox  
-moz-window-titlebar Firefox  
-moz-window-titlebar-maximized Firefox  
-apple-pay-button Safari iOS and macOS only. Available on the web starting in iOS 10.1 and macOS 10.12.1

Formal syntax

auto | none

Examples

The following would make an element look like a toolbar button in Firefox:

.exampleone {
  -moz-appearance: toolbarbutton;
}

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

Initial valueauto
Applies toall elements
Inheritedno
Mediaall
Computed valueas specified
Animation typediscrete
Canonical orderper grammar

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidiOS SafariSamsung Internet
Basic support
Experimental
Chrome Partial support 1
Prefixed
Partial support 1
Prefixed
Prefixed Requires the vendor prefix: -webkit-
Edge Partial support 12
Prefixed
Partial support 12
Prefixed
Prefixed Requires the vendor prefix: -webkit-
Firefox Partial support 1
Prefixed
Partial support 1
Prefixed
Prefixed Requires the vendor prefix: -moz-
Partial support 62
Prefixed Disabled
Prefixed Requires 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 Partial support 15
Prefixed
Partial support 15
Prefixed
Prefixed Requires the vendor prefix: -webkit-
Safari Partial support 3
Prefixed
Partial support 3
Prefixed
Prefixed Requires the vendor prefix: -webkit-
WebView Android Partial support 1
Prefixed
Partial support 1
Prefixed
Prefixed Requires the vendor prefix: -webkit-
Chrome Android Partial support 18
Prefixed
Partial support 18
Prefixed
Prefixed Requires the vendor prefix: -webkit-
Edge Mobile Partial support 12
Prefixed
Partial support 12
Prefixed
Prefixed Requires the vendor prefix: -webkit-
Firefox Android Partial support 4
Prefixed
Partial support 4
Prefixed
Prefixed Requires the vendor prefix: -moz-
Partial support 62
Prefixed Disabled
Prefixed Requires 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 Requires the vendor prefix: -webkit-
Safari iOS Partial support 3
Prefixed
Partial support 3
Prefixed
Prefixed Requires the vendor prefix: -webkit-
Samsung Internet Android Partial support 4.0
Prefixed
Partial support 4.0
Prefixed
Prefixed Requires the vendor prefix: -webkit-
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 18Edge Mobile Full support 12Firefox 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 4.0
auto
Experimental
Chrome No support NoEdge No support NoFirefox No support NoIE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoEdge Mobile No support NoFirefox Android No support NoOpera Android No support NoSafari iOS No support NoSamsung Internet Android No support No

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