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

Removed in FF 64

button-arrow-next  Firefox Removed in FF 64
button-arrow-previous  Firefox Removed in FF 64
button-arrow-up  Firefox Removed in FF 64
button-bevel  Firefox Chrome Safari Edge  
button-focus  Firefox Removed in FF 64
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 Removed in FF 64
groupbox  Firefox Removed in FF 64
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 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, the element was styled as menu item, item is highlighted when hovered.
menuitemtext  Firefox Removed in FF 64
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 Removed in Firefox 64
menuradio  Firefox Removed in Firefox 64
menuseparator  Firefox Removed in Firefox 64
meter 

Chrome Safari

New in Fx 64

meterbar  Firefox New in Fx 16
meterchunk  Firefox New in Fx 16. Removed in Firefox 64.
number-input  Firefox  
progress-bar  Chrome Safari New in Fx 64
progress-bar-value  Chrome Safari  
progressbar  Firefox The element is styled like a progress bar.
progressbar-vertical  Firefox  
progresschunk  Firefox Removed in Firefox 64.
progresschunk-vertical  Firefox Removed in Firefox 64.
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 Removed in Firefox 64, 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 Removed in Firefox 64.
radiomenuitem  Firefox Removed in Firefox 64.
range  Firefox  
range-thumb  Firefox  
rating-level-indicator  Safari  
resizer  Firefox Removed in Firefox 63
resizerpanel  Firefox Removed in Firefox 63.
scale-horizontal  Firefox  
scalethumbend  Firefox  
scalethumb-horizontal  Firefox  
scalethumbstart  Firefox  
scalethumbtick  Firefox  
scalethumb-vertical  Firefox  
scale-vertical  Firefox  
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.
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

Removed in Firefox 64.

sheet  None  
slider-horizontal  Chrome Safari Edge  
slider-vertical  Chrome Safari Edge  
sliderthumb-horizontal  Chrome Safari Edge  
sliderthumb-vertical  Chrome Safari Edge  
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.
square-button  Chrome Safari Edge  
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.
textarea  Chrome Safari Edge  
textfield  Firefox Chrome Safari Edge  
textfield-multiline  Firefox  
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.
relevancy-level-indicator  Safari  
-moz-win-borderless-glass  Firefox Removed in Firefox 64. This style applies the Aero Glass effect -- but without a border -- to the element.
-moz-win-browsertabbar-toolbox  Firefox Removed in Firefox 64. This toolbox style is meant to be used for the tab bar in a browser.
-moz-win-communicationstext  Firefox Removed in Firefox 64.
-moz-win-communications-toolbox  Firefox Removed in Firefox 64. 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 Removed in Firefox 64. This styles is used to exclude the Aero Glass effect on the element.
-moz-win-glass  Firefox Removed in Firefox 64. This style applies the Aero Glass effect to the element.
       
-moz-win-media-toolbox  Firefox Removed in Firefox 64. 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 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.
-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 AndroidSafari on iOSSamsung Internet
Basic support
Experimental
Chrome Partial support 1
Prefixed
Partial support 1
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Edge Partial support 12
Prefixed
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 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 Partial support 15
Prefixed
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 Partial support 1
Prefixed
Partial support 1
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Chrome Android Partial support 18
Prefixed
Partial support 18
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Edge Mobile Partial support 12
Prefixed
Partial support 12
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 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 3
Prefixed
Partial support 3
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Samsung Internet Android Partial support 4.0
Prefixed
Partial support 4.0
Prefixed
Prefixed Implemented with 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