{-moz-appearance} CSS Vendor Extension Property | CSS: Presentation Layer
Standards Based Development
The -moz-appearance is a Mozilla css extension used in Gecko to display an element using a platform-native styling based on the operating system's theme.
-moz-appearance is typically used in xul style sheets for designing custom widgets with platform-appropriate styling. -moz-appearance is also used in xbl implementations of widgets that ship with the Mozilla platform.
Note: do not use -moz-appearance on the Web! It is not only non-standard, but its behavior differs in different browser versions. Even the keyword none has differing behaviors on each form element on different browsers; some doesn't support it at all.
Keyword Values
| Value | Description |
|---|---|
none | No special styling is applied; default value. Note: bug 649849 and bug 605985. |
button | The element is drawn like a button. |
button-arrow-down | &#nbsp; |
button-arrow-next | &#nbsp; |
button-arrow-previous | &#nbsp; |
button-arrow-up | &#nbsp; |
button-bevel | &#nbsp; |
button-focus | &#nbsp; |
caret | &#nbsp; |
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 a would contain a label and a checkbox. |
checkbox-label | &#nbsp; |
checkmenuitem | &#nbsp; |
dualbutton | &#nbsp; |
groupbox | &#nbsp; |
listbox | &#nbsp; |
listitem | &#nbsp; |
menuarrow | &#nbsp; |
menubar | &#nbsp; |
menucheckbox | &#nbsp; |
menuimage | &#nbsp; |
menuitem | The element is styled as menu item, item is highlighted when hovered. |
menuitemtext | &#nbsp; |
menulist | &#nbsp; |
menulist-button | The element is styled as a button that would indicate a menulist can be opened. |
menulist-text | &#nbsp; |
menulist-textfield | The element is styled as the text field for a menulist. (Not implemented for the Windows platform) |
menupopup | &#nbsp; |
menuradio | &#nbsp; |
menuseparator | &#nbsp; |
meterbar | New in Firefox 16. |
meterchunk | New in Firefox 16 |
progressbar | The element is styled like a progress bar. |
progressbar-vertical | &#nbsp; |
progresschunk | &#nbsp; |
progresschunk-vertical | &#nbsp; |
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 would contain a label and a radio button. |
radio-label | &#nbsp; |
radiomenuitem | &#nbsp; |
resizer | &#nbsp; |
resizerpanel | &#nbsp; |
scale-horizontal | &#nbsp; |
scalethumbend | &#nbsp; |
scalethumb-horizontal | &#nbsp; |
scalethumbstart | &#nbsp; |
scalethumbtick | &#nbsp; |
scalethumb-vertical | &#nbsp; |
scale-vertical | &#nbsp; |
scrollbarbutton-down | &#nbsp; |
scrollbarbutton-left | &#nbsp; |
scrollbarbutton-right | &#nbsp; |
scrollbarbutton-up | &#nbsp; |
scrollbarthumb-horizontal | &#nbsp; |
scrollbarthumb-vertical | &#nbsp; |
scrollbartrack-horizontal | &#nbsp; |
scrollbartrack-vertical | &#nbsp; |
searchfield | &#nbsp; |
separator | &#nbsp; |
sheet | &#nbsp; |
spinner | &#nbsp; |
spinner-downbutton | &#nbsp; |
spinner-textfield | &#nbsp; |
spinner-upbutton | &#nbsp; |
splitter | &#nbsp; |
statusbar | &#nbsp; |
statusbarpanel | &#nbsp; |
tab | &#nbsp; |
tabpanel | &#nbsp; |
tabpanels | &#nbsp; |
tab-scroll-arrow-back | &#nbsp; |
tab-scroll-arrow-forward | &#nbsp; |
textfield | &#nbsp; |
textfield-multiline | &#nbsp; |
toolbar | &#nbsp; |
toolbarbutton | &#nbsp; |
toolbarbutton-dropdown | &#nbsp; |
toolbargripper | &#nbsp; |
toolbox | &#nbsp; |
tooltip | &#nbsp; |
treeheader | &#nbsp; |
treeheadercell | &#nbsp; |
treeheadersortarrow | &#nbsp; |
treeitem | &#nbsp; |
treeline | &#nbsp; |
treetwisty | &#nbsp; |
treetwistyopen | &#nbsp; |
treeview | &#nbsp; |
-moz-mac-unified-toolbar | Mac OS X only. This causes the toolbar and title bar to render using the unified toolbar style common to Mac OS X 10.4 and later applications. |
-moz-win-borderless-glass | Note: Requires Gecko 2.0. 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 | &#nbsp; |
-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-exclude-glass | Note: Requires Gecko 6.0. 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 | &#nbsp; |
-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-window-button-box | &#nbsp; |
-moz-window-button-box-maximized | &#nbsp; |
-moz-window-button-close | &#nbsp; |
-moz-window-button-maximize | &#nbsp; |
-moz-window-button-minimize | &#nbsp; |
-moz-window-button-restore | &#nbsp; |
-moz-window-frame-bottom | &#nbsp; |
-moz-window-frame-left | &#nbsp; |
-moz-window-frame-right | &#nbsp; |
-moz-window-titlebar | &#nbsp; |
-moz-window-titlebar-maximized | &#nbsp; |