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
CSS
Copy Code
.exampleone { -moz-appearance: toolbarbutton; }
Syntax
CSS
Copy Code
/* 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 |
CSS Copy Code div {-moz-appearance: none; -webkit-appearance: none; color: black;} HTML Copy Code <div>Lorem</div> |
No special styling is applied. This is the default. Note, however, bug 649849 and bug 605985. |
button |
CSS Copy Code div {-moz-appearance: button; -webkit-appearance: button; color: black; } HTML Copy Code <div>Lorem</div> |
The element is drawn like a button. |
button-arrow-down |
CSS Copy Code div {-moz-appearance: button-arrow-down; -webkit-appearance: button-arrow-down; color: black; } HTML Copy Code <div>Lorem</div> |
|
button-arrow-next |
CSS Copy Code div {-moz-appearance: button-arrow-next; -webkit-appearance: button-arrow-next; color: black; } HTML Copy Code <div>Lorem</div> |
|
button-arrow-previous |
CSS Copy Code div {-moz-appearance: button-arrow-previous; -webkit-appearance: button-arrow-previous; color: black; } HTML Copy Code <div>Lorem</div> |
|
button-arrow-up |
CSS Copy Code div {-moz-appearance: button-arrow-up; -webkit-appearance: button-arrow-up; color: black; } HTML Copy Code <div>Lorem</div> |
|
button-bevel |
CSS Copy Code div {-moz-appearance: button-bevel; -webkit-appearance: button-bevel; color: black; } HTML Copy Code <div>Lorem</div> |
|
button-focus |
CSS Copy Code div {-moz-appearance: button-focus; -webkit-appearance: button-focus; color: black; } HTML Copy Code <div>Lorem</div> |
|
caret |
CSS Copy Code div {-moz-appearance: caret; -webkit-appearance: caret; color: black; } HTML Copy Code <div>Lorem</div> |
|
checkbox |
CSS Copy Code div {-moz-appearance: checkbox; -webkit-appearance: checkbox; color: black; } HTML Copy Code <div>Lorem</div> |
The element is drawn like a checkbox, including only the actual "checkbox" portion. |
checkbox-container |
CSS Copy Code div {-moz-appearance: checkbox-container; -webkit-appearance: checkbox-container; color: black; } HTML Copy Code <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 |
CSS Copy Code div {-moz-appearance: checkbox-label; -webkit-appearance: checkbox-label; color: black; } HTML Copy Code <div>Lorem</div> |
|
checkmenuitem |
||
dualbutton |
CSS Copy Code div {-moz-appearance: dualbutton; -webkit-appearance: dualbutton; color: black; } HTML Copy Code <div>Lorem</div> |
|
groupbox |
CSS Copy Code div {-moz-appearance: groupbox; -webkit-appearance: groupbox; color: black; } HTML Copy Code <div>Lorem</div> |
|
listbox |
CSS Copy Code div {-moz-appearance: listbox; -webkit-appearance: listbox; height:20px; color: black; } HTML Copy Code <div>Lorem</div> |
|
listitem |
CSS Copy Code div {-moz-appearance: listitem; -webkit-appearance: listitem; color: black; } HTML Copy Code <div>Lorem</div> |
|
menuarrow |
CSS Copy Code div {-moz-appearance: menuarrow; -webkit-appearance: menuarrow; color: black; } HTML Copy Code <div>Lorem</div> |
|
menubar |
CSS Copy Code div {-moz-appearance: menubar; -webkit-appearance: menubar; color: balck; } HTML Copy Code <div>Lorem</div> |
|
menucheckbox |
CSS Copy Code div {-moz-appearance: menucheckbox; -webkit-appearance: menucheckbox; color: black; } HTML Copy Code <div>Lorem</div> |
|
menuimage |
CSS Copy Code div {-moz-appearance: menuimage; -webkit-appearance: menuimage; color: black; } HTML Copy Code <div>Lorem</div> |
|
menuitem |
CSS Copy Code div {-moz-appearance: menuitem; -webkit-appearance: menuitem; color: black; } HTML Copy Code <div>Lorem</div> |
The element is styled as menu item, item is highlighted when hovered. |
menuitemtext |
CSS Copy Code div {-moz-appearance: menuitemtext; -webkit-appearance: menuitemtext; color: black; } HTML Copy Code <div>Lorem</div> |
|
menulist |
CSS Copy Code div {-moz-appearance: menulist; -webkit-appearance: menulist; color: black; } HTML Copy Code <div>Lorem</div> |
|
menulist-button |
CSS Copy Code div {-moz-appearance: menulist-button; -webkit-appearance: menulist-button; color: black; } HTML Copy Code <div>Lorem</div> |
The element is styled as a button that would indicate a menulist can be opened. |
menulist-text |
CSS Copy Code div {-moz-appearance: menulist-text; -webkit-appearance: menulist-text; color: black; } HTML Copy Code <div>Lorem</div> |
|
menulist-textfield |
CSS Copy Code div {-moz-appearance: menulist-textfield; -webkit-appearance: menulist-textfield; color: black; } HTML Copy Code <div>Lorem</div> |
The element is styled as the text field for a menulist. (Not implemented for the Windows platform) |
menupopup |
CSS Copy Code div {-moz-appearance: menupopup; -webkit-appearance: menupopup; color: black; } HTML Copy Code <div>Lorem</div> |
|
menuradio |
CSS Copy Code div {-moz-appearance: menuradio; -webkit-appearance: menuradio; color: black; } HTML Copy Code <div>Lorem</div> |
|
menuseparator |
CSS Copy Code div {-moz-appearance: menuseparator; -webkit-appearance: menuseparator; color: transparent; } HTML Copy Code <div>Lorem</div> |
|
meterbar |
CSS Copy Code div {-moz-appearance: meterbar; -webkit-appearance: meterbar; color: black; } HTML Copy Code <div>Lorem</div> |
New in Fx 16. |
meterchunk |
CSS Copy Code div {-moz-appearance: meterchunk; -webkit-appearance: meterchunk; color: black; } HTML Copy Code <div>Lorem</div> |
New in Fx 16 |
progressbar |
CSS Copy Code div {-moz-appearance: progressbar; -webkit-appearance: progressbar; color: black; } HTML Copy Code <div>Lorem</div> |
The element is styled like a progress bar. |
progressbar-vertical |
CSS Copy Code div {-moz-appearance: progressbar-vertical; -webkit-appearance: preogressbar-vertical; color: transparent; } HTML Copy Code <div>Lorem</div> |
|
progresschunk |
CSS Copy Code div {-moz-appearance: progresschunk; -webkit-appearance: progresschunk; color: black; } HTML Copy Code <div>Lorem</div> |
|
progresschunk-vertical |
CSS Copy Code div {-moz-appearance: progresschunk-vertical; -webkit-appearance: progresschunk-vertical; color: black; } HTML Copy Code <div>Lorem</div> |
|
radio |
CSS Copy Code div {-moz-appearance: radio; -webkit-appearance: radio; color: black; } HTML Copy Code <div>Lorem</div> |
The element is drawn like a radio button, including only the actual "radio button" portion. |
radio-container |
CSS Copy Code div {-moz-appearance: radio-container; -webkit-appearance: radio-container; color: black; } HTML Copy Code <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 |
CSS Copy Code div {-moz-appearance: radio-label; -webkit-appearance: radio-label; color: black; } HTML Copy Code <div>Lorem</div> |
|
radiomenuitem |
CSS Copy Code div {-moz-appearance: radiomenuitem; -webkit-appearance: radiomenuitem; color: black; } HTML Copy Code <div>Lorem</div> |
|
| range |
CSS Copy Code div {-moz-appearance: range; -webkit-appearance: radiomenuitem; color: black; }range HTML Copy Code <div>Lorem</div> |
|
| range-thumb |
CSS Copy Code div {-moz-appearance: range-thumb; -webkit-appearance: range-thumb; color: black; } HTML Copy Code <div>Lorem</div> |
|
resizer |
CSS Copy Code div {-moz-appearance: resizer; -webkit-appearance: resizer; color: transparent; } HTML Copy Code <div>Lorem</div> |
|
resizerpanel |
CSS Copy Code div {-moz-appearance: resizerpanel; -webkit-appearance: resizerpanel; color: black; } HTML Copy Code <div>Lorem</div> |
|
scale-horizontal |
CSS Copy Code div {-moz-appearance: scale-horizontal; -webkit-appearance: scale-horizontal; color: transparent; } HTML Copy Code <div>Lorem</div> |
|
scalethumbend |
CSS Copy Code div {-moz-appearance: scalethumbend; -webkit-appearance: scalethumbend; color: black; } HTML Copy Code <div>Lorem</div> |
|
scalethumb-horizontal |
CSS Copy Code div {-moz-appearance: scalethumb-horizontal; -webkit-appearance: scalethumb-horizontal; color: transparent; } HTML Copy Code <div>Lorem</div> |
|
scalethumbstart |
CSS Copy Code div {-moz-appearance: scalethumbstart; -webkit-appearance: scalethumbstart; color: black; } HTML Copy Code <div>Lorem</div> |
|
scalethumbtick |
CSS Copy Code div {-moz-appearance: scalethumbtick; -webkit-appearance: scalethumbtick; color: black; } HTML Copy Code <div>Lorem</div> |
|
scalethumb-vertical |
CSS Copy Code div {-moz-appearance: scalethumb-vertical; -webkit-appearance: scalethumb-vertical; color: black; } HTML Copy Code <div>Lorem</div> |
|
scale-vertical |
CSS Copy Code div {-moz-appearance: scale-vertical; -webkit-appearance: scale-vertical; color: transparent; } HTML Copy Code <div>Lorem</div> |
|
scrollbarbutton-down |
CSS Copy Code div {-moz-appearance: scrollbarbutton-down; -webkit-appearance: scrollbarbutton-down; color: black; } CSS Copy Code <div>Lorem</div> |
|
scrollbarbutton-left |
CSS Copy Code div {-moz-appearance: scrollbarbutton-left; -webkit-appearance: scrollbarbutton-left; color: black; } CSS Copy Code <div>Lorem</div> |
|
scrollbarbutton-right |
CSS Copy Code div {-moz-appearance: scrollbarbutton-right; -webkit-appearance: scrollbarbutton-right; color: black; } CSS Copy Code <div>Lorem</div> |
|
scrollbarbutton-up |
CSS Copy Code div {-moz-appearance: scrollbarbutton-up; -webkit-appearance: scrollbarbutton-up; color: black; } CSS Copy Code <div>Lorem</div> |
|
scrollbarthumb-horizontal |
CSS Copy Code div {-moz-appearance: scrollbarthumb-horizontal; -webkit-appearance: scrollbarthumb-horizontal; color: black; } CSS Copy Code <div>Lorem</div> |
|
scrollbarthumb-vertical |
CSS Copy Code div {-moz-appearance: scrollbarthumb-vertical; -webkit-appearance: scrollbarthumb-vertical; color: black; } CSS Copy Code <div>Lorem</div> |
|
scrollbartrack-horizontal |
CSS Copy Code div {-moz-appearance: scrollbartrack-horizontal; -webkit-appearance: scrollbartrack-horizontal; color: black; } CSS Copy Code <div>Lorem</div> |
|
scrollbartrack-vertical |
CSS Copy Code div {-moz-appearance: scrollbartrack-vertical; -webkit-appearance: scrollbarbartrack-vertical; color: black; } CSS Copy Code <div>Lorem</div> |
|
searchfield |
CSS Copy Code div {-moz-appearance: searchfield; -webkit-appearance: searchfield; color: black; } CSS Copy Code <div>Lorem</div> |
|
separator |
CSS Copy Code div {-moz-appearance: separator; -webkit-appearance: separator; color: transparent; } CSS Copy Code <div>Lorem</div> |
|
sheet |
CSS Copy Code div {-moz-appearance: sheet; -webkit-appearance: sheet; color: black; } HTML Copy Code <div>Lorem</div> |
|
spinner |
CSS Copy Code div {-moz-appearance: spinner; -webkit-appearance: spinner; color: transparent; } HTML Copy Code <div>Lorem</div> |
|
spinner-downbutton |
||
spinner-textfield |
CSS Copy Code div {-moz-appearance: spinner-textfield; -webkit-appearance: spinner-textfield; color: black; } HTML Copy Code <div>Lorem</div> |
|
spinner-upbutton |
||
splitter |
CSS Copy Code div {-moz-appearance: splitter; -webkit-appearance: splitter; color: transparent; } HTML Copy Code <div>Lorem</div> |
|
statusbar |
CSS Copy Code div {-moz-appearance: statusbar; -webkit-appearance: statusbar; color: black; } HTML Copy Code <div>Lorem</div> |
|
statusbarpanel |
CSS Copy Code div {-moz-appearance: statusbarpanel; -webkit-appearance: statusbarpanel; color: black; } HTML Copy Code <div>Lorem</div> |
|
tab |
CSS Copy Code div {-moz-appearance: tab; -webkit-appearance: tab; height: 20px; color: black; } HTML Copy Code <div>Lorem</div> |
|
tabpanel |
CSS Copy Code div {-moz-appearance: tabpanel; -webkit-appearance: tabpanel; color: black; } HTML Copy Code <div>Lorem</div> |
|
tabpanels |
CSS Copy Code div {-moz-appearance: tabpanels; -webkit-appearance: tabpanels; color: black; } HTML Copy Code <div>Lorem</div> |
|
tab-scroll-arrow-back |
CSS Copy Code div {-moz-appearance: tab-scroll-arrow-back; -webkit-appearance: tab-scroll-arrow-back; color: black; } HTML Copy Code <div>Lorem</div> |
|
tab-scroll-arrow-forward |
CSS Copy Code div {-moz-appearance: tab-scroll-arrow-forward; -webkit-appearance: tab-scroll-arrow-forward; color: black; } HTML Copy Code <div>Lorem</div> |
|
textfield |
CSS Copy Code div {-moz-appearance: textfield; -webkit-appearance: textfield; color: black; } HTML Copy Code <div>Lorem</div> |
|
textfield-multiline |
CSS Copy Code div {-moz-appearance: textfield-multiline; -webkit-appearance: textfield-multiline; color: black; } HTML Copy Code <div>Lorem</div> |
|
toolbar |
CSS Copy Code div {-moz-appearance: toolbar; -webkit-appearance: toolbar; color: black; } HTML Copy Code <div>Lorem</div> |
|
toolbarbutton |
CSS Copy Code div {-moz-appearance: toolbarbutton; -webkit-appearance: toolbarbutton; color: black; } HTML Copy Code <div>Lorem</div> |
|
toolbarbutton-dropdown |
CSS Copy Code div {-moz-appearance: toolbarbutton-dropdown; -webkit-appearance: toolbarbutton-dropdown; color: black; } HTML Copy Code <div>Lorem</div> |
|
toolbargripper |
CSS Copy Code div {-moz-appearance: toolbargripper; -webkit-appearance: toolbargripper; color: black; } HTML Copy Code <div>Lorem</div> |
|
toolbox |
CSS Copy Code div {-moz-appearance: toolbox; -webkit-appearance: toolbox; color: black; } HTML Copy Code <div>Lorem</div> |
|
tooltip |
CSS Copy Code div {-moz-appearance: tooltip; -webkit-appearance: tooltip; color: black; } HTML Copy Code <div>Lorem</div> |
|
treeheader |
CSS Copy Code div {-moz-appearance: treeheader; -webkit-appearance: treeheader; color: black; } HTML Copy Code <div>Lorem</div> |
|
treeheadercell |
CSS Copy Code div {-moz-appearance: treeheadercell; -webkit-appearance: treeheadercell; height:20px; color: black; } HTML Copy Code <div>Lorem</div> |
|
treeheadersortarrow |
CSS Copy Code div {-moz-appearance: treeheadersortarrow; -webkit-appearance: treeheadersortarrow; color: black; } HTML Copy Code <div>Lorem</div> |
|
treeitem |
CSS Copy Code div {-moz-appearance: treeitem; -webkit-appearance: treeitem; color: black; } HTML Copy Code <div>Lorem</div> |
|
treeline |
CSS Copy Code div {-moz-appearance: treeline; -webkit-appearance: treeline; color: black; } HTML Copy Code <div>Lorem</div> |
|
treetwisty |
CSS Copy Code div {-moz-appearance: treetwisty; -webkit-appearance: treetwisty; color: transparent; } HTML Copy Code <div>Lorem</div> |
|
treetwistyopen |
CSS Copy Code div {-moz-appearance: treetwistyopen; -webkit-appearance: treetwistyopen; color: transparent; } HTML Copy Code <div>Lorem</div> |
|
treeview |
CSS Copy Code div {-moz-appearance: treeview; -webkit-appearance: treeview; color: black; } HTML Copy Code <div>Lorem</div> |
|
-moz-win-borderless-glass |
CSS Copy Code div {-moz-appearance: -moz-win-borderless-glass; color: black; } HTML Copy Code <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 |
CSS Copy Code div {-moz-appearance: -moz-win-browsertabbar-toolbox; color: black; } HTML Copy Code <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 |
CSS Copy Code div {-moz-appearance: -moz-win-communicationstext; color: black; } HTML Copy Code <div>Lorem</div> |
|
-moz-win-communications-toolbox |
CSS Copy Code div {-moz-appearance: -moz-win-communications-toolbox; color: black; } HTML Copy Code <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 |
CSS Copy Code div {-moz-appearance: -moz-win-exclude-glass; color: black; } HTML Copy Code <div>Lorem</div> |
Windows Vista and later only. This styles is used to exclude the Aero Glass effect on the element. |
-moz-win-glass |
CSS Copy Code div {-moz-appearance: -moz-win-glass; color: black; } HTML Copy Code <div>Lorem</div> |
Windows Vista and later only. This style applies the Aero Glass effect to the element. |
-moz-win-mediatext |
CSS Copy Code div {-moz-appearance: -moz-win-mediatext; color: black; } HTML Copy Code <div>Lorem</div> |
|
-moz-win-media-toolbox |
CSS Copy Code div {-moz-appearance: -moz-win-media-toolbox; color: black; } HTML Copy Code <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 |
CSS Copy Code div {-moz-appearance: -moz-window-button-box; color: black; } HTML Copy Code <div>Lorem</div> |
|
-moz-window-button-box-maximized |
CSS Copy Code div {-moz-appearance: -moz-window-button-box-maximized; color: black; } HTML Copy Code <div>Lorem</div> |
|
-moz-window-button-close |
CSS Copy Code div {-moz-appearance: -moz-window-button-close; color: black; } HTML Copy Code <div>Lorem</div> |
|
-moz-window-button-maximize |
CSS Copy Code div {-moz-appearance: -moz-window-button-maximize; color: black; } HTML Copy Code <div>Lorem</div> |
|
-moz-window-button-minimize |
CSS Copy Code div {-moz-appearance: -moz-window-button-minimize; color: black; } HTML Copy Code <div>Lorem</div> |
|
-moz-window-button-restore |
CSS Copy Code div {-moz-appearance: -moz-window-button-restore; color: black; } HTML Copy Code <div>Lorem</div> |
|
-moz-window-frame-bottom |
CSS Copy Code div {-moz-appearance: -moz-window-frame-bottom; color: black; } HTML Copy Code <div>Lorem</div> |
|
-moz-window-frame-left |
CSS Copy Code div {-moz-appearance: -moz-window-frame-left; color: black; } HTML Copy Code <div>Lorem</div> |
|
-moz-window-frame-right |
CSS Copy Code div {-moz-appearance: -moz-window-frame-right; color: black; } HTML Copy Code <div>Lorem</div> |
|
-moz-window-titlebar |
CSS Copy Code div {-moz-appearance: -moz-window-titlebar; color: black; } HTML Copy Code <div>Lorem</div> |
|
-moz-window-titlebar-maximized |
CSS Copy Code div {-moz-appearance: -moz-window-titlebar-maximized; color: black; } HTML Copy Code <div>Lorem</div> |
Formal syntax
CSS
Copy Code
none <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> button <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> button-arrow-down <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> button-arrow-next <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> button-arrow-previous <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> button-arrow-up <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> button-bevel <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> button-focus <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> caret <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> checkbox <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> checkbox-container <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> checkbox-label <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> checkmenuitem <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> dualbutton <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> groupbox <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> listbox <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> listitem <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> menuarrow <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> menubar <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> menucheckbox <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> menuimage <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> menuitem <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> menuitemtext <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> menulist <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> menulist-button <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> menulist-text <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> menulist-textfield <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> menupopup <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> menuradio <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> menuseparator <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> meterbar <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> meterchunk <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> progressbar <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> progressbar-vertical <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> progresschunk <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> progresschunk-vertical <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> radio <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> radio-container <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> radio-label <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> radiomenuitem <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> range <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> range-thumb <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> resizer <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> resizerpanel <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> scale-horizontal <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> scalethumbend <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> scalethumb-horizontal <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> scalethumbstart <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> scalethumbtick <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> scalethumb-vertical <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> scale-vertical <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> scrollbarbutton-down <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> scrollbarbutton-left <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> scrollbarbutton-right <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> scrollbarbutton-up <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> scrollbarthumb-horizontal <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> scrollbarthumb-vertical <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> scrollbartrack-horizontal <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> scrollbartrack-vertical <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> searchfield <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> separator <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> sheet <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> spinner <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> spinner-downbutton <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> spinner-textfield <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> spinner-upbutton <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> splitter <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> statusbar <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> statusbarpanel <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> tab <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> tabpanel <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> tabpanels <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> tab-scroll-arrow-back <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> tab-scroll-arrow-forward <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> textfield <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> textfield-multiline <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> toolbar <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> toolbarbutton <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> toolbarbutton-dropdown <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> toolbargripper <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> toolbox <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> tooltip <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> treeheader <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> treeheadercell <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> treeheadersortarrow <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> treeitem <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> treeline <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> treetwisty <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> treetwistyopen <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> treeview <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> -moz-mac-unified-toolbar <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> -moz-win-borderless-glass <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> -moz-win-browsertabbar-toolbox <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> -moz-win-communicationstext <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> -moz-win-communications-toolbox <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> -moz-win-exclude-glass <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> -moz-win-glass <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> -moz-win-mediatext <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> -moz-win-media-toolbox <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> -moz-window-button-box <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> -moz-window-button-box-maximized <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> -moz-window-button-close <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> -moz-window-button-maximize <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> -moz-window-button-minimize <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> -moz-window-button-restore <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> -moz-window-frame-bottom <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> -moz-window-frame-left <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> -moz-window-frame-right <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> -moz-window-titlebar <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> -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 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 |
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
- Definition of
appearancein CSS 3 Basic User Interface (Candidate Recommendation from 2004-05-11), outdated (Theappearanceproperty has been dropped in newer versions of this specification.) - Dropped CSS3 features from the UI spec.
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