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 | <compat>где 
<compat> = searchfield | textarea | push-button | button-bevel | slider-horizontal | checkbox | radio | square-button | menulist | menulist-button | 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
Канонический порядок	per grammar

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

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 Частичная поддержка 1 С префиксом Частичная поддержка 1 С префиксом С префиксом Требует вендорный префикс: -webkit-	Edge Частичная поддержка 12 С префиксом Частичная поддержка 12 С префиксом С префиксом Требует вендорный префикс: -webkit-	Firefox Частичная поддержка 1 С префиксом Частичная поддержка 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 Частичная поддержка 15 С префиксом Частичная поддержка 15 С префиксом С префиксом Требует вендорный префикс: -webkit-	Safari Частичная поддержка 3 С префиксом Частичная поддержка 3 С префиксом С префиксом Требует вендорный префикс: -webkit-	WebView Android Частичная поддержка 1 С префиксом Частичная поддержка 1 С префиксом С префиксом Требует вендорный префикс: -webkit-	Chrome Android Частичная поддержка 18 С префиксом Частичная поддержка 18 С префиксом С префиксом Требует вендорный префикс: -webkit-	Firefox Android Частичная поддержка 4 С префиксом Частичная поддержка 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 Частичная поддержка 14 С префиксом Частичная поддержка 14 С префиксом С префиксом Требует вендорный префикс: -webkit-	Safari iOS Частичная поддержка 1 С префиксом Частичная поддержка 1 С префиксом С префиксом Требует вендорный префикс: -webkit-	Samsung Internet Android Частичная поддержка 1.0 С префиксом Частичная поддержка 1.0 С префиксом С префиксом Требует вендорный префикс: -webkit-
`auto` Экспериментальная	Chrome Нет поддержки Нет	Edge Нет поддержки Нет	Firefox Нет поддержки Нет	IE Нет поддержки Нет	Opera Нет поддержки Нет	Safari Нет поддержки Нет	WebView Android Нет поддержки Нет	Chrome Android Нет поддержки Нет	Firefox Android Нет поддержки Нет	Opera Android Нет поддержки Нет	Safari iOS Нет поддержки Нет	Samsung Internet Android Нет поддержки Нет
`button` Экспериментальная	Chrome Полная поддержка 1	Edge Полная поддержка 12	Firefox Полная поддержка 1	IE Нет поддержки Нет	Opera Полная поддержка 15	Safari Полная поддержка 3	WebView Android Полная поддержка 1	Chrome Android Полная поддержка 18	Firefox Android Полная поддержка 4	Opera Android Полная поддержка 14	Safari iOS Полная поддержка 1	Samsung Internet Android Полная поддержка 1.0
`<compat>` (compatibility values `searchfield`, `textarea`, `push-button`, `button-bevel`, `slider-horizontal`, `checkbox`, `radio`, `square-button`, `menulist`, `menulist-button`, `listbox`, `meter`, `progress-bar`) Экспериментальная	Chrome Полная поддержка 1	Edge Частичная поддержка 12	Firefox Частичная поддержка 1	IE Нет поддержки Нет	Opera Полная поддержка 15	Safari Полная поддержка 3	WebView Android Полная поддержка ≤37	Chrome Android Полная поддержка 18	Firefox Android Частичная поддержка 4	Opera Android Полная поддержка 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 Частичная поддержка 4 Замечания Частичная поддержка 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 Полная поддержка 1	Edge Полная поддержка 12	Firefox Полная поддержка 1	IE Нет поддержки Нет	Opera Полная поддержка 15	Safari Полная поддержка 3	WebView Android Полная поддержка 1	Chrome Android Полная поддержка 18	Firefox Android Полная поддержка 4	Opera Android Полная поддержка 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