appearance (-moz-appearance, -webkit-appearance)

Это экспериментальная технология
Так как спецификация этой технологии ещё не стабилизировалась, смотрите таблицу совместимости по поводу использования в различных браузерах. Также заметьте, что синтаксис и поведение экспериментальной технологии может измениться в будущих версиях браузеров, вслед за изменениями спецификации.

CSS свойство -moz-appearance используется в Gecko (Firefox) для отображения элемента, используя базовые стили платформы на основе темы операционной системы.

Свойство -webkit-appearance используется в браузерах WebKit-based (например, Safari) и Blink-based (например, Chrome, Opera) для того же эффекта. Заметьте, что Firefox и Edge также поддерживают -webkit-appearance, для обеспечения совместимости.

Это свойство часто используется в таблицах стилей XUL для разработки пользовательских виджетов в стиле, соответствующем платформе. Оно, также, используется в реализации XBL виджетов, которые поставляются с платформой Mozilla.

Примечание о совместимости: Если вы хотите использовать это свойство на веб-сайте, вы должны тестировать его очень осторожно. Хотя оно поддерживается в большинстве современных браузерах, его реализация широко варьируется. В старых браузерах, даже ключевое слово none не окажет одинакового эффекта на все элементы формы различных браузеров, а некоторые его совсем не поддерживают. Различия меньше в более современных браузерах.

Синтаксис

/* CSS модуль базового интерфейса 4 уровня, значения */
appearance: none;
appearance: auto; 
appearance: button;
appearance: textfield;
appearance: searchfield;
appearance: textarea;
appearance: push-button;
appearance: button-bevel;
appearance: slider-horizontal;
appearance: checkbox;
appearance: radio;
appearance: square-button;
appearance: menulist;
appearance: menulist-button;
appearance: listbox;
appearance: meter;
appearance: progress-bar;

/* Частичный список доступных значений в Gecko */
-moz-appearance: scrollbarbutton-up;
-moz-appearance: button-bevel;

/* Частичный список доступных значений в WebKit/Blink (таких как Gecko и Edge) */
-webkit-appearance: media-mute-button;
-webkit-appearance: caret;

Свойство -moz-appearance может быть указано как одно значение, выбранное из списка ниже.

Значения

<appearance> является одним из нижеследующих ключевых свойств:

Value	Demo	Browser	Description
`none`	div{ color: black; -moz-appearance:none; -webkit-appearance:none; appearance:none; } <div>Lorem</div>	Firefox Chrome Safari Edge	No special styling is applied. This is the default.
`auto`	div{ color: black; -moz-appearance: auto; -webkit-appearance: auto; appearance:auto; } <div>Lorem</div>	None	The user agent selects the appropriate special styling based on the element. Acts as `none` on elements with no special styling.
`attachment`	div{ color: black; -moz-appearance: attachment; -webkit-appearance: attachment; } <div>Lorem</div>	Safari
`borderless-attachment`	div{ color: black; -moz-appearance: borderless-attachment; -webkit-appearance: borderless-attachment; } <div>Lorem</div>	Safari
`button`	div { color: black; -moz-appearance: button; -webkit-appearance: button; } <div>Lorem</div>	Firefox Chrome Safari Edge	The element is drawn like a button.
`button-arrow-down`	div { color: black; -moz-appearance: button-arrow-down; -webkit-appearance: button-arrow-down; } <div>Lorem</div>	Firefox	Removed in FF 64
`button-arrow-next`	div { color: black; -moz-appearance: button-arrow-next; -webkit-appearance: button-arrow-next; } <div>Lorem</div>	Firefox	Removed in FF 64
`button-arrow-previous`	div { color: black; -moz-appearance: button-arrow-previous; -webkit-appearance: button-arrow-previous; } <div>Lorem</div>	Firefox	Removed in FF 64
`button-arrow-up`	div { color: black; -moz-appearance: button-arrow-up; -webkit-appearance: button-arrow-up; } <div>Lorem</div>	Firefox	Removed in FF 64
`button-bevel`	div { color: black; -moz-appearance: button-bevel; -webkit-appearance: button-bevel; } <div>Lorem</div>	Firefox Chrome Safari Edge
`button-focus`	div { color: black; -moz-appearance: button-focus; -webkit-appearance: button-focus; } <div>Lorem</div>	Firefox	Removed in FF 64
`caps-lock-indicator`	div{ color: black; -moz-appearance: caps-lock-indicator; -webkit-appearance: caps-lock-indicator; } <div>Lorem</div>	Safari Edge
`caret`	div { color: black; -moz-appearance: caret; -webkit-appearance: caret; } <div>Lorem</div>	Firefox Chrome Safari Edge
`checkbox`	div { color: black; -moz-appearance: checkbox; -webkit-appearance: checkbox; } <div>Lorem</div>	Firefox Chrome Safari Edge	The element is drawn like a checkbox, including only the actual "checkbox" portion.
`checkbox-container`	div { color: black; -moz-appearance: checkbox-container; -webkit-appearance: checkbox-container; } <div>Lorem</div>	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`	div { color: black; -moz-appearance: checkbox-label; -webkit-appearance: checkbox-label; } <div>Lorem</div>	Firefox
`checkmenuitem`	div { color: black; height: 20px; -moz-appearance: checkmenuitem; -webkit-appearance: checkmenuitem; } <div>Lorem</div>	Firefox
`color-well`	div{ color: black; -moz-appearance: color-well; -webkit-appearance: color-well; } <div>Lorem</div>	Safari	`input type=color`
`continuous-capacity-level-indicator`	div{ color: black; -moz-appearance: continuous-capacity-level-indicator; -webkit-appearance: continuous-capacity-level-indicator; } <div>Lorem</div>	Safari
`default-button`	div{ color: black; -moz-appearance: default-button; -webkit-appearance: default-button; } <div>Lorem</div>	Safari Edge
`discrete-capacity-level-indicator`	div{ color: black; -moz-appearance: discrete-capacity-level-indicator; -webkit-appearance: discrete-capacity-level-indicator; } <div>Lorem</div>	Safari
`dualbutton`	div { color: black; -moz-appearance: dualbutton; -webkit-appearance: dualbutton; } <div>Lorem</div>	Firefox	Removed in FF 64
`groupbox`	div { color: black; -moz-appearance: groupbox; -webkit-appearance: groupbox; } <div>Lorem</div>	Firefox	Removed in FF 64
`inner-spin-button`	div{ color: black; -webkit-appearance: inner-spin-button; } <div>Lorem</div>	Firefox Chrome Safari
`image-controls-button`	div{ color: black; -moz-appearance: image-controls-button; -webkit-appearance: image-controls-button; } <div>Lorem</div>	Safari
`list-button`	div{ color: black; -moz-appearance: list-button; -webkit-appearance: list-button; } <div>Lorem</div>	Safari	datalist
`listbox`	div { color: black; height:20px; -moz-appearance: listbox; -webkit-appearance: listbox; } <div>Lorem</div>	Firefox Chrome Safari Edge
`listitem`	div { color: black; -moz-appearance: listitem; -webkit-appearance: listitem; } <div>Lorem</div>	Firefox Chrome Safari Edge
`media-enter-fullscreen-button`	div{ color: black; -webkit-appearance: media-enter-fullscreen-button; } <div>Lorem</div>	Chrome Safari
`media-exit-fullscreen-button`	div{ color: black; -webkit-appearance: media-exit-fullscreen-button; } <div>Lorem</div>	Chrome Safari
`media-fullscreen-volume-slider`	div{ color: black; -moz-appearance: media-fullscreen-volume-slider; -webkit-appearance: media-fullscreen-volume-slider; } <div>Lorem</div>	Safari
`media-fullscreen-volume-slider-thumb`	div{ color: black; -moz-appearance: media-fullscreen-volume-slider-thumb; -webkit-appearance: media-fullscreen-volume-slider-thumb; } <div>Lorem</div>	Safari
`media-mute-button`	div{ color: black; -webkit-appearance: media-mute-button; } <div>Lorem</div>	Chrome Safari Edge
`media-play-button`	div{ color: black; -webkit-appearance: media-play-button; } <div>Lorem</div>	Chrome Safari Edge
`media-overlay-play-button`	div{ color: black; -webkit-appearance: media-overlay-play-button; } <div>Lorem</div>	Chrome Safari
`media-return-to-realtime-button`	div{ color: black; -moz-appearance: media-return-to-realtime-button; -webkit-appearance: media-return-to-realtime-button; } <div>Lorem</div>	Safari
`media-rewind-button`	div{ color: black; -moz-appearance: media-rewind-button; -webkit-appearance: media-rewind-button; } <div>Lorem</div>	Safari
`media-seek-back-button`	div{ color: black; -moz-appearance: media-seek-back-button; -webkit-appearance: media-seek-back-button; } <div>Lorem</div>	Safari Edge
`media-seek-forward-button`	div{ color: black; -moz-appearance: media-seek-forward-button; -webkit-appearance: media-seek-forward-button; } <div>Lorem</div>	Safari Edge
`media-toggle-closed-captions-button`	div{ color: black; -webkit-appearance: media-toggle-closed-captions-button; } <div>Lorem</div>	Chrome Safari
`media-slider`	div{ color: black; -webkit-appearance: media-slider; } <div>Lorem</div>	Chrome Safari Edge
`media-sliderthumb`	div{ color: black; -webkit-appearance: media-sliderthumb; } <div>Lorem</div>	Chrome Safari Edge
`media-volume-slider-container`	div{ color: black; -webkit-appearance: media-volume-slider-container; } <div>Lorem</div>	Chrome Safari
`media-volume-slider-mute-button`	div{ color: black; -moz-appearance: media-volume-slider-mute-button; -webkit-appearance: media-volume-slider-mute-button; } <div>Lorem</div>	Safari
`media-volume-slider`	div{ color: black; -webkit-appearance: media-volume-slider; } <div>Lorem</div>	Chrome Safari
`media-volume-sliderthumb`	div{ color: black; -webkit-appearance: media-volume-slider-thumb; } <div>Lorem</div>	Chrome Safari
`media-controls-background`	div{ color: black; -webkit-appearance: media-controls-background; } <div>Lorem</div>	Chrome Safari
`media-controls-dark-bar-background`	div{ color: black; -moz-appearance: media-controls-dark-bar-background; -webkit-appearance: media-controls-dark-bar-background; } <div>Lorem</div>	Safari
`media-controls-fullscreen-background`	div{ color: black; -webkit-appearance: media-controls-fullscreen-background; } <div>Lorem</div>	Chrome Safari
`media-controls-light-bar-background`	div{ color: black; -moz-appearance: media-controls-light-bar-background; -webkit-appearance: media-controls-light-bar-background; } <div>Lorem</div>	Safari
`media-current-time-display`	div{ color: black; -webkit-appearance: media-current-time-display; } <div>Lorem</div>	Chrome Safari
`media-time-remaining-display`	div{ color: black; -webkit-appearance: media-time-remaining-display; } <div>Lorem</div>	Chrome Safari
`menuarrow`	div { color: black; -moz-appearance: menuarrow; -webkit-appearance: menuarrow; } <div>Lorem</div>	Firefox	Removed in Firefox 64
`menubar`	div { color: balck; -moz-appearance: menubar; -webkit-appearance: menubar; } <div>Lorem</div>	Firefox	Removed in Firefox 64
`menucheckbox`	div { color: black; -moz-appearance: menucheckbox; -webkit-appearance: menucheckbox; } <div>Lorem</div>	Firefox	Removed in Firefox 64
`menuimage`	div { color: black; -moz-appearance: menuimage; -webkit-appearance: menuimage; } <div>Lorem</div>	Firefox	Removed in Firefox 64
`menuitem`	div { color: black; -moz-appearance: menuitem; -webkit-appearance: menuitem; } <div>Lorem</div>	Firefox	Removed in Firefox 64, the element was styled as menu item, item is highlighted when hovered.
`menuitemtext`	div { color: black; -moz-appearance: menuitemtext; -webkit-appearance: menuitemtext; } <div>Lorem</div>	Firefox	Removed in FF 64
`menulist`	div { color: black; -moz-appearance: menulist; -webkit-appearance: menulist; } <div>Lorem</div>	Firefox Chrome Safari Edge
`menulist-button`	div { color: black; -moz-appearance: menulist-button; -webkit-appearance: menulist-button; } <div>Lorem</div>	Firefox Chrome Safari Edge	The element is styled as a button that would indicate a menulist can be opened.
`menulist-text`	div { color: black; -moz-appearance: menulist-text; -webkit-appearance: menulist-text; } <div>Lorem</div>	Firefox Chrome Safari Edge
`menulist-textfield`	div { color: black; -moz-appearance: menulist-textfield; -webkit-appearance: menulist-textfield; } <div>Lorem</div>	Firefox Chrome Safari Edge	The element is styled as the text field for a menulist. (Not implemented for the Windows platform)
`menupopup`	div { color: black; -moz-appearance: menupopup; -webkit-appearance: menupopup; } <div>Lorem</div>	Firefox	Removed in Firefox 64
`menuradio`	div { color: black; -moz-appearance: menuradio; -webkit-appearance: menuradio; } <div>Lorem</div>	Firefox	Removed in Firefox 64
`menuseparator`	div { color: transparent; -moz-appearance: menuseparator; -webkit-appearance: menuseparator; } <div>Lorem</div>	Firefox	Removed in Firefox 64
`meter`	div{ color: black; -webkit-appearance: meter; } <div>Lorem</div>	Chrome Safari Firefox	New in Fx 64
`meterbar`	div { color: black; -moz-appearance: meterbar; -webkit-appearance: meterbar; } <div>Lorem</div>	Firefox	New in Fx 16. Use `meter` instead
`meterchunk`	div { color: black; -moz-appearance: meterchunk; -webkit-appearance: meterchunk; } <div>Lorem</div>	Firefox	New in Fx 16. Removed in Firefox 64.
`number-input`	div { color: black; -moz-appearance: number-input; -webkit-appearance: number-input; } <div>Lorem</div>	Firefox
`progress-bar`	div{ color: black; -webkit-appearance: progress-bar; } <div>Lorem</div>	Chrome Safari Firefox	New in Fx 64
`progress-bar-value`	div{ color: black; -webkit-appearance: progress-bar-value; } <div>Lorem</div>	Chrome Safari
`progressbar`	div { color: black; -moz-appearance: progressbar; -webkit-appearance: progressbar; } <div>Lorem</div>	Firefox	The element is styled like a progress bar. Use `progress-bar` instead
`progressbar-vertical`	div { color: transparent; -moz-appearance: progressbar-vertical; -webkit-appearance: preogressbar-vertical; } <div>Lorem</div>	Firefox
`progresschunk`	div { color: black; -moz-appearance: progresschunk; -webkit-appearance: progresschunk; } <div>Lorem</div>	Firefox	Removed in Firefox 64.
`progresschunk-vertical`	div { color: black; -moz-appearance: progresschunk-vertical; -webkit-appearance: progresschunk-vertical; } <div>Lorem</div>	Firefox	Removed in Firefox 64.
`push-button`	div{ color: black; -webkit-appearance: push-button; } <div>Lorem</div>	Chrome Safari Edge
`radio`	div { color: black; -moz-appearance: radio; -webkit-appearance: radio; } <div>Lorem</div>	Firefox Chrome Safari Edge	The element is drawn like a radio button, including only the actual "radio button" portion.
`radio-container`	div { color: black; -moz-appearance: radio-container; -webkit-appearance: radio-container; } <div>Lorem</div>	Firefox	Removed in Firefox 64, 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 { color: black; -moz-appearance: radio-label; -webkit-appearance: radio-label; } <div>Lorem</div>	Firefox	Removed in Firefox 64.
`radiomenuitem`	div { color: black; -moz-appearance: radiomenuitem; -webkit-appearance: radiomenuitem; } <div>Lorem</div>	Firefox	Removed in Firefox 64.
`range`	div { color: black; -moz-appearance: range; -webkit-appearance: range; } range <div>Lorem</div>	Firefox
`range-thumb`	div { color: black; -moz-appearance: range-thumb; -webkit-appearance: range-thumb; } <div>Lorem</div>	Firefox
`rating-level-indicator`	div{ color: black; -moz-appearance: rating-level-indicator; -webkit-appearance: rating-level-indicator; } <div>Lorem</div>	Safari
`resizer`	div { color: transparent; -moz-appearance: resizer; -webkit-appearance: resizer; } <div>Lorem</div>	Firefox	Removed in Firefox 63
`resizerpanel`	div { color: black; -moz-appearance: resizerpanel; -webkit-appearance: resizerpanel; } <div>Lorem</div>	Firefox	Removed in Firefox 63.
`scale-horizontal`	div { color: transparent; -moz-appearance: scale-horizontal; -webkit-appearance: scale-horizontal; } <div>Lorem</div>	Firefox
`scalethumbend`	div { color: black; -moz-appearance: scalethumbend; -webkit-appearance: scalethumbend; } <div>Lorem</div>	Firefox
`scalethumb-horizontal`	div { color: transparent; -moz-appearance: scalethumb-horizontal; -webkit-appearance: scalethumb-horizontal; } <div>Lorem</div>	Firefox
`scalethumbstart`	div { color: black; -moz-appearance: scalethumbstart; -webkit-appearance: scalethumbstart; } <div>Lorem</div>	Firefox
`scalethumbtick`	div { color: black; -moz-appearance: scalethumbtick; -webkit-appearance: scalethumbtick; } <div>Lorem</div>	Firefox
`scalethumb-vertical`	div { color: black; -moz-appearance: scalethumb-vertical; -webkit-appearance: scalethumb-vertical; } <div>Lorem</div>	Firefox
`scale-vertical`	div { color: transparent; -moz-appearance: scale-vertical; -webkit-appearance: scale-vertical; } <div>Lorem</div>	Firefox
`scrollbarbutton-down`	div { color: black; -moz-appearance: scrollbarbutton-down; -webkit-appearance: scrollbarbutton-down; } <div>Lorem</div>	Firefox	Removed in Firefox 63.
`scrollbarbutton-left`	div { color: black; -moz-appearance: scrollbarbutton-left; -webkit-appearance: scrollbarbutton-left; } <div>Lorem</div>	Firefox	Removed in Firefox 63.
`scrollbarbutton-right`	div { color: black; -moz-appearance: scrollbarbutton-right; -webkit-appearance: scrollbarbutton-right; } <div>Lorem</div>	Firefox	Removed in Firefox 63.
`scrollbarbutton-up`	div { color: black; -moz-appearance: scrollbarbutton-up; -webkit-appearance: scrollbarbutton-up; } <div>Lorem</div>	Firefox	Removed in Firefox 63.
`scrollbarthumb-horizontal`	div { color: black; -moz-appearance: scrollbarthumb-horizontal; -webkit-appearance: scrollbarthumb-horizontal; } <div>Lorem</div>	Firefox
`scrollbarthumb-vertical`	div { color: black; -moz-appearance: scrollbarthumb-vertical; -webkit-appearance: scrollbarthumb-vertical; } <div>Lorem</div>	Firefox
`scrollbartrack-horizontal`	div { color: black; -moz-appearance: scrollbartrack-horizontal; -webkit-appearance: scrollbartrack-horizontal; } <div>Lorem</div>	Firefox
`scrollbartrack-vertical`	div { color: black; -moz-appearance: scrollbartrack-vertical; -webkit-appearance: scrollbarbartrack-vertical; } <div>Lorem</div>	Firefox
`searchfield`	div { color: black; -moz-appearance: searchfield; -webkit-appearance: searchfield; } <div>Lorem</div>	Firefox Chrome Safari Edge
`searchfield-decoration`	div{ color: black; -moz-appearance: searchfield-decoration; -webkit-appearance: searchfield-decoration; } <div>Lorem</div>	Safari Edge
`searchfield-results-decoration`	div{ color: black; -moz-appearance: searchfield-results-decoration; -webkit-appearance: searchfield-results-decoration; } <div>Lorem</div>	Safari Edge
`searchfield-results-button`	div{ color: black; -moz-appearance: searchfield-results-button; -webkit-appearance: searchfield-results-button; } <div>Lorem</div>	Safari Edge
`searchfield-cancel-button`	div{ color: black; -webkit-appearance: searchfield-cancel-button; } <div>Lorem</div>	Chrome Safari Edge
`snapshotted-plugin-overlay`	div{ color: black; -moz-appearance: snapshotted-plugin-overlay; -webkit-appearance: snapshotted-plugin-overlay; } <div>Lorem</div>	Safari
`separator`	div { color: transparent; -moz-appearance: separator; -webkit-appearance: separator; } <div>Lorem</div>	Firefox	Removed in Firefox 64.
`sheet`	div { color: black; -moz-appearance: sheet; -webkit-appearance: sheet; } <div>Lorem</div>	None
`slider-horizontal`	div{ color: black; -webkit-appearance: slider-horizontal; } <div>Lorem</div>	Chrome Safari Edge
`slider-vertical`	div{ color: black; -webkit-appearance: slider-vertical; } <div>Lorem</div>	Chrome Safari Edge
`sliderthumb-horizontal`	div{ color: black; -webkit-appearance: slider-thumb-horizontal; } <div>Lorem</div>	Chrome Safari Edge
`sliderthumb-vertical`	div{ color: black; -webkit-appearance: slider-thumb-vertical; } <div>Lorem</div>	Chrome Safari Edge
`spinner`	div { color: transparent; -moz-appearance: spinner; -webkit-appearance: spinner; } <div>Lorem</div>	Firefox	Removed in Firefox 64.
`spinner-downbutton`	div { color: black; -moz-appearance: spinner-downbutton; -webkit-appearance: spinner-downbutton; } <div>Lorem</div>	Firefox	Removed in Firefox 64.
`spinner-textfield`	div { color: black; -moz-appearance: spinner-textfield; -webkit-appearance: spinner-textfield; } <div>Lorem</div>	Firefox	Removed in Firefox 64.
`spinner-upbutton`	div { color: black; -moz-appearance: spinner-upbutton; -webkit-appearance: spinner-upbutton; } <div>Lorem</div>	Firefox	Removed in Firefox 64.
`splitter`	div { color: transparent; -moz-appearance: splitter; -webkit-appearance: splitter; } <div>Lorem</div>	Firefox	Removed in Firefox 64.
`square-button`	div{ color: black; -moz-appearance: square-button; -webkit-appearance: square-button; } <div>Lorem</div>	Chrome Safari Edge
`statusbar`	div { color: black; -moz-appearance: statusbar; -webkit-appearance: statusbar; } <div>Lorem</div>	Firefox	Removed in Firefox 64.
`statusbarpanel`	div { color: black; -moz-appearance: statusbarpanel; -webkit-appearance: statusbarpanel; } <div>Lorem</div>	Firefox	Removed in Firefox 64.
`tab`	div { color: black; height: 20px; -moz-appearance: tab; -webkit-appearance: tab; } <div>Lorem</div>	Firefox	Removed in Firefox 64
`tabpanel`	div { color: black; -moz-appearance: tabpanel; -webkit-appearance: tabpanel; } <div>Lorem</div>	Firefox	Removed in Firefox 64.
`tabpanels`	div { color: black; -moz-appearance: tabpanels; -webkit-appearance: tabpanels; } <div>Lorem</div>	Firefox	Removed in Firefox 64
`tab-scroll-arrow-back`	div { color: black; -moz-appearance: tab-scroll-arrow-back; -webkit-appearance: tab-scroll-arrow-back; } <div>Lorem</div>	Firefox	Removed in Firefox 64.
`tab-scroll-arrow-forward`	div { color: black; -moz-appearance: tab-scroll-arrow-forward; -webkit-appearance: tab-scroll-arrow-forward; } <div>Lorem</div>	Firefox	Removed in Firefox 64.
`textarea`	div{ color: black; -webkit-appearance: textarea; } <div>Lorem</div>	Firefox Chrome Safari Edge
`textfield`	div { color: black; -moz-appearance: textfield; -webkit-appearance: textfield; } <div>Lorem</div>	Firefox Chrome Safari Edge
`textfield-multiline`	div { color: black; -moz-appearance: textfield-multiline; -webkit-appearance: textfield-multiline; } <div>Lorem</div>	Firefox	Use `textarea` instead
`toolbar`	div { color: black; -moz-appearance: toolbar; -webkit-appearance: toolbar; } <div>Lorem</div>	Firefox	Removed in Firefox 64.
`toolbarbutton`	div { color: black; -moz-appearance: toolbarbutton; -webkit-appearance: toolbarbutton; } <div>Lorem</div>	Firefox	Removed in Firefox 64.
`toolbarbutton-dropdown`	div { color: black; -moz-appearance: toolbarbutton-dropdown; -webkit-appearance: toolbarbutton-dropdown; } <div>Lorem</div>	Firefox	Removed in Firefox 64.
`toolbargripper`	div { color: black; -moz-appearance: toolbargripper; -webkit-appearance: toolbargripper; } <div>Lorem</div>	Firefox	Removed in Firefox 64.
`toolbox`	div { color: black; -moz-appearance: toolbox; -webkit-appearance: toolbox; } <div>Lorem</div>	Firefox	Removed in Firefox 64.
`tooltip`	div { color: black; -moz-appearance: tooltip; -webkit-appearance: tooltip; } <div>Lorem</div>	Firefox	Removed in Firefox 64.
`treeheader`	div { color: black; -moz-appearance: treeheader; -webkit-appearance: treeheader; } <div>Lorem</div>	Firefox	Removed in Firefox 64.
`treeheadercell`	div { color: black; height:20px; -moz-appearance: treeheadercell; -webkit-appearance: treeheadercell; } <div>Lorem</div>	Firefox	Removed in Firefox 64.
`treeheadersortarrow`	div { color: black; -moz-appearance: treeheadersortarrow; -webkit-appearance: treeheadersortarrow; } <div>Lorem</div>	Firefox	Removed in Firefox 64.
`treeitem`	div { color: black; -moz-appearance: treeitem; -webkit-appearance: treeitem; } <div>Lorem</div>	Firefox	Removed in Firefox 64.
`treeline`	div { color: black; -moz-appearance: treeline; -webkit-appearance: treeline; } <div>Lorem</div>	Firefox	Removed in Firefox 64.
`treetwisty`	div { color: transparent; -moz-appearance: treetwisty; -webkit-appearance: treetwisty; } <div>Lorem</div>	Firefox	Removed in Firefox 64.
`treetwistyopen`	div { color: transparent; -moz-appearance: treetwistyopen; -webkit-appearance: treetwistyopen; } <div>Lorem</div>	Firefox	Removed in Firefox 64.
`treeview`	div { color: black; -moz-appearance: treeview; -webkit-appearance: treeview; } <div>Lorem</div>	Firefox	Removed in Firefox 64.
`relevancy-level-indicator`	div{ color: black; -moz-appearance: relevancy-level-indicator; -webkit-appearance: relevancy-level-indicator; } <div>Lorem</div>	Safari
`-moz-win-borderless-glass`	div { color: black; -moz-appearance: -moz-win-borderless-glass; } <div>Lorem</div>	Firefox	Removed in Firefox 64. This style applies the Aero Glass effect -- but without a border -- to the element.
`-moz-win-browsertabbar-toolbox`	div { color: black; -moz-appearance: -moz-win-browsertabbar-toolbox; } <div>Lorem</div>	Firefox	Removed in Firefox 64. This toolbox style is meant to be used for the tab bar in a browser.
`-moz-win-communicationstext`	div { color: black; -moz-appearance: -moz-win-communicationstext; } <div>Lorem</div>	Firefox	Removed in Firefox 64.
`-moz-win-communications-toolbox`	div { color: black; -moz-appearance: -moz-win-communications-toolbox; } <div>Lorem</div>	Firefox	Removed in Firefox 64. 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 { color: black; -moz-appearance: -moz-win-exclude-glass; } <div>Lorem</div>	Firefox	Removed in Firefox 64. This styles is used to exclude the Aero Glass effect on the element.
`-moz-win-glass`	div { color: black; -moz-appearance: -moz-win-glass; } <div>Lorem</div>	Firefox	Removed in Firefox 64. This style applies the Aero Glass effect to the element.
`-moz-win-media-toolbox`	div { color: black; -moz-appearance: -moz-win-media-toolbox; } <div>Lorem</div>	Firefox	Removed in Firefox 64. 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 { color: black; -moz-appearance: -moz-window-button-box; } <div>Lorem</div>	Firefox	Removed in Firefox 64.
`-moz-window-button-box-maximized`	div { color: black; -moz-appearance: -moz-window-button-box-maximized; } <div>Lorem</div>	Firefox	Removed in Firefox 64.
`-moz-window-button-close`	div { color: black; -moz-appearance: -moz-window-button-close; } <div>Lorem</div>	Firefox	Removed in Firefox 64.
`-moz-window-button-maximize`	div { color: black; -moz-appearance: -moz-window-button-maximize; } <div>Lorem</div>	Firefox	Removed in Firefox 64.
`-moz-window-button-minimize`	div { color: black; -moz-appearance: -moz-window-button-minimize; } <div>Lorem</div>	Firefox	Removed in Firefox 64.
`-moz-window-button-restore`	div { color: black; -moz-appearance: -moz-window-button-restore; } <div>Lorem</div>	Firefox	Removed in Firefox 64.
`-moz-window-frame-bottom`	div { color: black; -moz-appearance: -moz-window-frame-bottom; } <div>Lorem</div>	Firefox	Removed in Firefox 64.
`-moz-window-frame-left`	div { color: black; -moz-appearance: -moz-window-frame-left; } <div>Lorem</div>	Firefox	Removed in Firefox 64.
`-moz-window-frame-right`	div { color: black; -moz-appearance: -moz-window-frame-right; } <div>Lorem</div>	Firefox	Removed in Firefox 64.
`-moz-window-titlebar`	div { color: black; -moz-appearance: -moz-window-titlebar; } <div>Lorem</div>	Firefox	Removed in Firefox 64.
`-moz-window-titlebar-maximized`	div { color: black; -moz-appearance: -moz-window-titlebar-maximized; } <div>Lorem</div>	Firefox	Removed in Firefox 64.
`-apple-pay-button`	div{ color: black; -webkit-appearance: -apple-pay-button; } <div>Lorem</div>	Safari	iOS and macOS only. Available on the web starting in iOS 10.1 and macOS 10.12.1

Формальный синтаксис

none | auto | button | textfield | menulist-button | <compat-auto>где 
<compat-auto> = searchfield | textarea | push-button | slider-horizontal | checkbox | radio | square-button | menulist | listbox | meter | progress-bar

Примеры

Нижеприведенный пример показывает, как сделать элемент, выглядящий как кнопка панели инструментов в Firefox:

.exampleone {
  -moz-appearance: toolbarbutton;
}

Смотрите также this JSFiddle в качестве примера, показывающего как вы можете использвать appearance: none для стилизации радио кнопок и чекбоксов.

Спецификации

Спецификация	Статус	Комментарии
CSS Basic User Interface Module Level 4 Определение 'appearance' в этой спецификации.	Рабочий черновик	Первое определение.

Начальное значение	`auto`
Применяется к	все элементы
Наследуется	нет
Обработка значения	как указано
Animation type	discrete

Поддержка браузерами

Update compatibility data on GitHub

	Компьютеры						Мобильные
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome для Android	Firefox для Android	Opera для Android	Safari on iOS	Samsung Internet
`appearance`	Chrome Полная поддержка 84 Полная поддержка 84 Частичная поддержка 1 С префиксом С префиксом Требует вендорный префикс: -webkit-	Edge Полная поддержка 84 Полная поддержка 84 Частичная поддержка 12 С префиксом С префиксом Требует вендорный префикс: -webkit-	Firefox Полная поддержка 80 Полная поддержка 80 Частичная поддержка 1 С префиксом С префиксом Требует вендорный префикс: -moz- Частичная поддержка 64 С префиксом С префиксом Требует вендорный префикс: -webkit- Частичная поддержка 62 С префиксом Отключено С префиксом Требует вендорный префикс: -webkit- Отключено From version 62: this feature is behind the `layout.css.webkit-appearance.enabled` preference (needs to be set to `true`). To change preferences in Firefox, visit about:config.	IE Нет поддержки Нет	Opera Полная поддержка 70 Полная поддержка 70 Частичная поддержка 15 С префиксом С префиксом Требует вендорный префикс: -webkit-	Safari Частичная поддержка 3 С префиксом Частичная поддержка 3 С префиксом С префиксом Требует вендорный префикс: -webkit-	WebView Android Полная поддержка 84 Полная поддержка 84 Частичная поддержка 1 С префиксом С префиксом Требует вендорный префикс: -webkit-	Chrome Android Полная поддержка 84 Полная поддержка 84 Частичная поддержка 18 С префиксом С префиксом Требует вендорный префикс: -webkit-	Firefox Android Полная поддержка 80 Полная поддержка 80 Частичная поддержка 4 С префиксом С префиксом Требует вендорный префикс: -moz- Частичная поддержка 64 С префиксом С префиксом Требует вендорный префикс: -webkit- Частичная поддержка 62 С префиксом Отключено С префиксом Требует вендорный префикс: -webkit- Отключено From version 62: this feature is behind the `layout.css.webkit-appearance.enabled` preference (needs to be set to `true`). To change preferences in Firefox, visit about:config.	Opera Android Полная поддержка 60 Полная поддержка 60 Частичная поддержка 14 С префиксом С префиксом Требует вендорный префикс: -webkit-	Safari iOS Частичная поддержка 1 С префиксом Частичная поддержка 1 С префиксом С префиксом Требует вендорный префикс: -webkit-	Samsung Internet Android Частичная поддержка 1.0 С префиксом Частичная поддержка 1.0 С префиксом С префиксом Требует вендорный префикс: -webkit-
`auto`	Chrome Полная поддержка 83	Edge Полная поддержка 83	Firefox Полная поддержка 80	IE Нет поддержки Нет	Opera Полная поддержка 69	Safari Нет поддержки Нет	WebView Android Полная поддержка 83	Chrome Android Полная поддержка 83	Firefox Android Полная поддержка 80	Opera Android Полная поддержка 59	Safari iOS Нет поддержки Нет	Samsung Internet Android Полная поддержка 13.0
`<compat-auto>` (compatibility values `searchfield`, `textarea`, `push-button`, `slider-horizontal`, `checkbox`, `radio`, `square-button`, `menulist`, `listbox`, `meter`, `progress-bar`, `button`)	Chrome Полная поддержка 83 Полная поддержка 83 Частичная поддержка 1	Edge Полная поддержка 83 Полная поддержка 83 Частичная поддержка 12	Firefox Полная поддержка 80 Полная поддержка 80 Частичная поддержка 1	IE Нет поддержки Нет	Opera Полная поддержка 69 Полная поддержка 69 Частичная поддержка 15	Safari Частичная поддержка 3	WebView Android Полная поддержка 83 Полная поддержка 83 Частичная поддержка 1	Chrome Android Полная поддержка 83 Полная поддержка 83 Частичная поддержка 18	Firefox Android Полная поддержка 80 Полная поддержка 80 Частичная поддержка 4	Opera Android Полная поддержка 59 Полная поддержка 59 Частичная поддержка 14	Safari iOS Частичная поддержка 1	Samsung Internet Android Частичная поддержка 1.0
`menulist-button`	Chrome Полная поддержка 83 Полная поддержка 83 Частичная поддержка 1	Edge Полная поддержка 83 Полная поддержка 83 Частичная поддержка 12	Firefox Полная поддержка 80 Полная поддержка 80 Частичная поддержка 1 Замечания Замечания See bug 1481615.	IE Нет поддержки Нет	Opera Полная поддержка 69 Полная поддержка 69 Частичная поддержка 15	Safari Частичная поддержка 3	WebView Android Полная поддержка 83 Полная поддержка 83 Частичная поддержка 1	Chrome Android Полная поддержка 83 Полная поддержка 83 Частичная поддержка 18	Firefox Android Полная поддержка 80 Полная поддержка 80 Частичная поддержка 4 Замечания Замечания See bug 1481615.	Opera Android Полная поддержка 59 Полная поддержка 59 Частичная поддержка 14	Safari iOS Частичная поддержка 1	Samsung Internet Android Частичная поддержка 1.0
`none`	Chrome Полная поддержка 1	Edge Полная поддержка 12	Firefox Полная поддержка 54 Полная поддержка 54 Частичная поддержка 1 Замечания Замечания Doesn't work with `<input type="checkbox">` and `<input type="radio">`.	IE Нет поддержки Нет	Opera Полная поддержка 15	Safari Полная поддержка 3	WebView Android Полная поддержка 1	Chrome Android Полная поддержка 18	Firefox Android Полная поддержка 54 Полная поддержка 54 Частичная поддержка 4 Замечания Замечания Doesn't work with `<input type="checkbox">` and `<input type="radio">`.	Opera Android Полная поддержка 14	Safari iOS Полная поддержка 3	Samsung Internet Android Полная поддержка 1.0
`textfield`	Chrome Полная поддержка 83 Полная поддержка 83 Частичная поддержка 1	Edge Полная поддержка 83 Полная поддержка 83 Частичная поддержка 12	Firefox Полная поддержка 80 Полная поддержка 80 Частичная поддержка 1	IE Нет поддержки Нет	Opera Полная поддержка 69 Полная поддержка 69 Частичная поддержка 15	Safari Частичная поддержка 3	WebView Android Полная поддержка 83 Полная поддержка 83 Частичная поддержка 1	Chrome Android Полная поддержка 83 Полная поддержка 83 Частичная поддержка 18	Firefox Android Полная поддержка 80 Полная поддержка 80 Частичная поддержка 4	Opera Android Полная поддержка 59 Полная поддержка 59 Частичная поддержка 14	Safari iOS Частичная поддержка 1	Samsung Internet Android Частичная поддержка 1.0

Легенда

Полная поддержка: Полная поддержка
Частичная поддержка: Частичная поддержка
Нет поддержки: Нет поддержки
Смотрите замечания реализации.: Смотрите замечания реализации.
Пользователь должен сам включить эту возможность.: Пользователь должен сам включить эту возможность.
Требует вендорный префикс или другое имя для использования.: Требует вендорный префикс или другое имя для использования.

Смотрите также

Definition of appearance in CSS 3 Basic User Interface (Candidate Recommendation from 2004-05-11).
Dropped CSS3 features from the UI spec.4