CSS - -moz-appearance (-webkit-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.

Example

.exampleone {
  -moz-appearance: toolbarbutton;
}

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

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

Description  

Non-standard
This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.

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.

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.

Do not use this property on Web sites: not only is it non-standard, but its behavior changes from one browser to another. 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.

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

Browser Compatibility  

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

[1] Not fully supported.

[2] Only the none, button, and textfield values are supported. See the documentation on MSDN.

See Also  

Specifications  

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

License

© 2016 Mozilla Contributors
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-us/docs/web/css/-moz-appearance