W3cubDocs

/CSS

-webkit-appearance

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 value none (but this value is overriden in the user agent CSS)
Applies to all elements
Inherited no
Media visual
Computed value as specified
Animation type discrete
Canonical order the 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

.exampleone {
  -moz-appearance: toolbarbutton;
}

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 1.0 (1.7 or earlier)-moz[1] No support ? 3.0-webkit
Feature Android Edge Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support ? (Yes)-webkit 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

© 2005–2017 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-appearance