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

The -moz-appearance CSS property is used in Gecko (Firefox) to display an element using a 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 some non-WebKit browsers 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.

Note: If you wish to use this property on websites, you should test it very carefully — it is non-standard, and historically its behavior has changed from one browser to another. In older browsers even the keyword none does not have the same behavior on each form element across different browsers, and some do not support it at all. The differences are smaller in the newest browsers.

Initial valuenone (but this value is overriden in the user agent CSS)
Applies toall elements
Inheritedno
Mediavisual
Computed valueas specified
Animation typediscrete
Canonical orderthe unique non-ambiguous order defined by the formal grammar

Syntax

/* 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 */
-webkit-appearance: none;
-webkit-appearance: button;
-webkit-appearance: checkbox;
-webkit-appearance: scrollbarbutton-up;

Values

<appearance> is one of the following keywords:

Value Demo Description
none No special styling is applied. This is the default. Note, however, bug 649849 and bug 605985.
button The element is drawn like a button.
button-arrow-down  
button-arrow-next  
button-arrow-previous  
button-arrow-up  
button-bevel  
button-focus  
caret  
checkbox The element is drawn like a checkbox, including only the actual "checkbox" portion.
checkbox-container 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  
checkmenuitem  
dualbutton  
groupbox  
listbox  
listitem  
menuarrow  
menubar  
menucheckbox  
menuimage  
menuitem The element is styled as menu item, item is highlighted when hovered.
menuitemtext  
menulist  
menulist-button The element is styled as a button that would indicate a menulist can be opened.
menulist-text  
menulist-textfield The element is styled as the text field for a menulist. (Not implemented for the Windows platform)
menupopup  
menuradio  
menuseparator  
meterbar New in Fx 16.
meterchunk New in Fx 16
progressbar The element is styled like a progress bar.
progressbar-vertical  
progresschunk  
progresschunk-vertical  
radio The element is drawn like a radio button, including only the actual "radio button" portion.
radio-container 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  
radiomenuitem  
range  
range-thumb  
resizer  
resizerpanel  
scale-horizontal  
scalethumbend  
scalethumb-horizontal  
scalethumbstart  
scalethumbtick  
scalethumb-vertical  
scale-vertical  
scrollbarbutton-down  
scrollbarbutton-left  
scrollbarbutton-right  
scrollbarbutton-up  
scrollbarthumb-horizontal  
scrollbarthumb-vertical  
scrollbartrack-horizontal  
scrollbartrack-vertical  
searchfield  
separator  
sheet  
spinner  
spinner-downbutton  
spinner-textfield  
spinner-upbutton  
splitter  
statusbar  
statusbarpanel  
tab  
tabpanel  
tabpanels  
tab-scroll-arrow-back  
tab-scroll-arrow-forward  
textfield  
textfield-multiline  
toolbar  
toolbarbutton  
toolbarbutton-dropdown  
toolbargripper  
toolbox  
tooltip  
treeheader  
treeheadercell  
treeheadersortarrow  
treeitem  
treeline  
treetwisty  
treetwistyopen  
treeview  
-moz-win-borderless-glass Windows Vista and later only. This style applies the Aero Glass effect -- but without a border -- to the element.
-moz-win-browsertabbar-toolbox Windows Vista and later only. This toolbox style is meant to be used for the tab bar in a browser.
-moz-win-communicationstext  
-moz-win-communications-toolbox 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 Windows Vista and later only. This styles is used to exclude the Aero Glass effect on the element.
-moz-win-glass Windows Vista and later only. This style applies the Aero Glass effect to the element.
-moz-win-mediatext  
-moz-win-media-toolbox 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  
-moz-window-button-box-maximized  
-moz-window-button-close  
-moz-window-button-maximize  
-moz-window-button-minimize  
-moz-window-button-restore  
-moz-window-frame-bottom  
-moz-window-frame-left  
-moz-window-frame-right  
-moz-window-titlebar  
-moz-window-titlebar-maximized  

Formal syntax

none | button | button-arrow-down | button-arrow-next | button-arrow-previous | button-arrow-up | button-bevel | button-focus | caret | checkbox | checkbox-container | checkbox-label | checkmenuitem | dualbutton | groupbox | listbox | listitem | menuarrow | menubar | menucheckbox | menuimage | menuitem | menuitemtext | menulist | menulist-button | menulist-text | menulist-textfield | menupopup | menuradio | menuseparator | meterbar | meterchunk | progressbar | progressbar-vertical | progresschunk | progresschunk-vertical | radio | radio-container | radio-label | radiomenuitem | range | range-thumb | resizer | resizerpanel | scale-horizontal | scalethumbend | scalethumb-horizontal | scalethumbstart | scalethumbtick | scalethumb-vertical | scale-vertical | scrollbarbutton-down | scrollbarbutton-left | scrollbarbutton-right | scrollbarbutton-up | scrollbarthumb-horizontal | scrollbarthumb-vertical | scrollbartrack-horizontal | scrollbartrack-vertical | searchfield | separator | sheet | spinner | spinner-downbutton | spinner-textfield | spinner-upbutton | splitter | statusbar | statusbarpanel | tab | tabpanel | tabpanels | tab-scroll-arrow-back | tab-scroll-arrow-forward | textfield | textfield-multiline | toolbar | toolbarbutton | toolbarbutton-dropdown | toolbargripper | toolbox | tooltip | treeheader | treeheadercell | treeheadersortarrow | treeitem | treeline | treetwisty | treetwistyopen | treeview | -moz-mac-unified-toolbar | -moz-win-borderless-glass | -moz-win-browsertabbar-toolbox | -moz-win-communicationstext | -moz-win-communications-toolbox | -moz-win-exclude-glass | -moz-win-glass | -moz-win-mediatext | -moz-win-media-toolbox | -moz-window-button-box | -moz-window-button-box-maximized | -moz-window-button-close | -moz-window-button-maximize | -moz-window-button-minimize | -moz-window-button-restore | -moz-window-frame-bottom | -moz-window-frame-left | -moz-window-frame-right | -moz-window-titlebar | -moz-window-titlebar-maximized

Examples

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

.exampleone {
  -moz-appearance: toolbarbutton;
}

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

Specifications

The appearance property is currently not present in any newer CSS specification.

Browser compatibility

Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 1.0 (Yes)-webkit[2] 1.0 (1.7 or earlier)-moz[1]
54 (54)[3]
No support[2] ? 3.0-webkit
Feature Android Edge Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support ? (Yes)-webkit (Yes) 11.0-webkit[2] ? ? ?

[1] Not fully supported.

[2] Doesn't work on IE for Desktop. Only works in IE for Mobile and the none, button, and textfield values are supported. See the documentation on MSDN.

[3] bug 605985 was also fixed in Gecko 54, meaning that checkboxes and radio buttons are no longer replaced elements when styled with -moz-appearance: none (in Firefox, but not Firefox mobile). This has further increased the ability to customize styling of these elements in Firefox desktop — you can now set border and background-color on them.

See also