Наши волонтёры ещё не перевели данную статью на Русский. Присоединяйтесь к нам и помогите сделать эту работу!
Вы можете также прочитать эту статью на English (US).

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.

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.

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;

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 Browser Description
none All No special styling is applied. This is the default.
button Firefox Chrome The element is drawn like a button.
button-arrow-down Firefox  
button-arrow-next Firefox  
button-arrow-previous Firefox  
button-arrow-up Firefox  
button-bevel Firefox Chrome  
       
button-focus Firefox  
caret Firefox Chrome  
checkbox Firefox Chrome The element is drawn like a checkbox, including only the actual "checkbox" portion.
checkbox-container Firefox 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 Firefox  
checkmenuitem Firefox  
dualbutton Firefox  
groupbox Firefox  
inner-spin-button   Chrome  
listbox Firefox Chrome  
listitem Firefox Chrome  
media-enter-fullscreen-button   Chrome  
media-exit-fullscreen-button   Chrome  
media-mute-button   Chrome  
media-play-button   Chrome  
media-overlay-play-button   Chrome  
media-toggle-closed-captions-button   Chrome  
media-slider   Chrome  
media-sliderthumb   Chrome  
media-volume-slider-container   Chrome  
media-volume-slider   Chrome  
media-volume-sliderthumb   Chrome  
media-controls-background   Chrome  
media-controls-fullscreen-background   Chrome  
media-current-time-display   Chrome  
media-time-remaining-display   Chrome  
menuarrow Firefox  
menubar Firefox  
menucheckbox Firefox  
menuimage Firefox  
menuitem Firefox The element is styled as menu item, item is highlighted when hovered.
menuitemtext Firefox  
menulist Firefox Chrome  
menulist-button Firefox Chrome The element is styled as a button that would indicate a menulist can be opened.
menulist-text Firefox Chrome  
menulist-textfield Firefox Chrome The element is styled as the text field for a menulist. (Not implemented for the Windows platform)
menupopup Firefox  
menuradio Firefox  
menuseparator Firefox  
meter   Chrome  
meterbar Firefox New in Fx 16.
meterchunk Firefox New in Fx 16
progress-bar   Chrome  
progress-bar-value   Chrome  
progressbar Firefox The element is styled like a progress bar.
progressbar-vertical Firefox  
progresschunk Firefox  
progresschunk-vertical Firefox  
push-button   Chrome  
radio Firefox Chrome The element is drawn like a radio button, including only the actual "radio button" portion.
radio-container Firefox 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 Firefox  
radiomenuitem Firefox  
range Firefox  
range-thumb Firefox  
resizer Firefox  
resizerpanel Firefox  
scale-horizontal Firefox  
scalethumbend Firefox  
scalethumb-horizontal Firefox  
scalethumbstart Firefox  
scalethumbtick Firefox  
scalethumb-vertical Firefox  
scale-vertical Firefox  
scrollbarbutton-down Firefox  
scrollbarbutton-left Firefox  
scrollbarbutton-right Firefox  
scrollbarbutton-up Firefox  
scrollbarthumb-horizontal Firefox  
scrollbarthumb-vertical Firefox  
scrollbartrack-horizontal Firefox  
scrollbartrack-vertical Firefox  
searchfield Firefox Chrome  
searchfield-cancel-button   Chrome  
separator Firefox  
sheet Firefox  
slider-horizontal   Chrome  
slider-vertical   Chrome  
sliderthumb-horizontal   Chrome  
sliderthumb-vertical   Chrome  
spinner Firefox  
spinner-downbutton Firefox  
spinner-textfield Firefox  
spinner-upbutton Firefox  
splitter Firefox  
square-button   Chrome  
statusbar Firefox  
statusbarpanel Firefox  
tab Firefox  
tabpanel Firefox  
tabpanels Firefox  
tab-scroll-arrow-back Firefox  
tab-scroll-arrow-forward Firefox  
textarea   Chrome  
textfield Firefox Chrome  
textfield-multiline Firefox  
toolbar Firefox  
toolbarbutton Firefox  
toolbarbutton-dropdown Firefox  
toolbargripper Firefox  
toolbox Firefox  
tooltip Firefox  
treeheader Firefox  
treeheadercell Firefox  
treeheadersortarrow Firefox  
treeitem Firefox  
treeline Firefox  
treetwisty Firefox  
treetwistyopen Firefox  
treeview Firefox  
-moz-win-borderless-glass Firefox Windows Vista and later only. This style applies the Aero Glass effect -- but without a border -- to the element.
-moz-win-browsertabbar-toolbox Firefox Windows Vista and later only. This toolbox style is meant to be used for the tab bar in a browser.
-moz-win-communicationstext Firefox  
-moz-win-communications-toolbox Firefox 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 Firefox Windows Vista and later only. This styles is used to exclude the Aero Glass effect on the element.
-moz-win-glass Firefox Windows Vista and later only. This style applies the Aero Glass effect to the element.
-moz-win-mediatext Firefox  
       
-moz-win-media-toolbox Firefox 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 Firefox  
-moz-window-button-box-maximized Firefox  
-moz-window-button-close Firefox  
-moz-window-button-maximize Firefox  
-moz-window-button-minimize Firefox  
-moz-window-button-restore Firefox  
-moz-window-frame-bottom Firefox  
-moz-window-frame-left Firefox  
-moz-window-frame-right Firefox  
-moz-window-titlebar Firefox  
-moz-window-titlebar-maximized Firefox  
-apple-pay-button     iOS and macOS only. Available on the web starting in iOS 10.1 and macOS 10.12.1

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

Initial valuenone (but this value is overridden in the user agent CSS)
Applies toall elements
Inheritedno
Mediavisual
Computed valueas specified
Animation typediscrete
Canonical orderthe unique non-ambiguous order defined by the formal grammar

Browser compatibility

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Basic support1 -webkit- 12 -webkit- 1 -moz- No15 -webkit- 3 -webkit-
none112

54

11

No153
auto No No No No No No
FeatureAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Basic support1 -webkit- 1 -webkit- 12 -webkit- 4 -moz- 14 -webkit- 3 -webkit- 4.0 -webkit-
none1112411434.0
auto No No No No No No No

1. Doesn’t work with <input type="checkbox"> and <input type="radio">

See also