-webkit-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.
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 several non-WebKit browsers also support -webkit-appearance
for compatibility reasons.
For a long time, browsers did not support the non-prefixed appearance
property, but newer browsers now do.
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 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
The following would make an element look like a toolbar button:
.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 | 1.0 (1.7 or earlier)-moz[1] 54 (54)[3][4] 55 (55)-webkit[5] | No support | ? | 3.0-webkit |
Feature | Android | Edge | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile | |
---|---|---|---|---|---|---|---|
Basic support | ? | (Yes)-webkit |
(Yes) 54.0 (54)[3] 55.0 (55)-webkit[5] | 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.
[3] Now bugs bug 418833 and bug 1320732 have been fixed, <input>
elements of type checkbox
and radio
with appearance: none
set on them can be styled with significantly more CSS properties.
[4] bug 605985 was also fixed in Gecko 54, meaning that checkboxes and radio buttons are no longer replaced elements when styled with 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-
[5] Gecko 55 implemented support for the -webkit
prefixed version of the property as an alias of the standard appearance
property, while the -moz
prefixed version is still supported with all proprietary values.
See also
appearance
- Drafted in CSS Basic UI Module Level 4.
-
Definition of
appearance
in CSS 3 Basic User Interface (Candidate Recommendation from 2004-05-11). - Dropped CSS3 features from the UI spec.4
© 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