W3cubDocs

/CSS

-webkit-appearance

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 Edge also supports -webkit-appearance (instead of -ms-appearance) for compatibility reasons.

/* 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;

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.

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

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

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

Browser compatibility

Feature	Chrome	Edge	Firefox (Gecko)	Internet Explorer	Opera	Safari (WebKit)
Basic support	1.0-webkit	12-webkit^[2]	1.0 (1.7 or earlier)-moz^[1] 54 (54)-moz^[3]	No support^[2]	15-webkit	3.0-webkit

Feature	Android	Edge	Firefox Mobile (Gecko)	IE Phone	Opera Mobile	Safari Mobile
Basic support	(Yes)-webkit	(Yes)-webkit	(Yes)-moz	11.0-webkit^[2]	(Yes)-webkit	(Yes)-webkit

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

[3] bug 605985 was 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.