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

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

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	Browser	Description
`none`	Firefox Chrome Safari Edge	Hides certain features of widgets, such as arrow displayed in select element, indicating that list can be expanded.
`auto`	Firefox Chrome Edge	The user agent selects the appropriate special styling based on the element. Acts as `none` on elements with no special styling.
`menulist-button`	Firefox Chrome Safari Edge
`textfield`	Firefox Chrome Safari Edge
The following values are treated as equivalent to `auto`:
`button`	Firefox Chrome Safari Edge	The element used to be drawn like a button.
`checkbox`	Firefox Chrome Safari Edge	The element used to be drawn like a checkbox, including only the actual "checkbox" portion.
`listbox`	Firefox Chrome Safari Edge
`menulist`	Firefox Chrome Safari Edge
`meter`	Chrome Safari Firefox
`progress-bar`	Chrome Safari Firefox
`push-button`	Chrome Safari Edge
`radio`	Firefox Chrome Safari Edge	The element used to be drawn like a radio button, including only the actual "radio button" portion.
`searchfield`	Firefox Chrome Safari Edge
`slider-horizontal`	Chrome Safari Edge
`square-button`	Chrome Safari Edge
`textarea`	Firefox Chrome Safari Edge

Non-standard keywords

The following values may be operational on historical browser versions using -moz-appearance or -webkit-appearance prefix, but not on the standard appearance property.

Value	Browser	Description
`attachment`	Safari
`borderless-attachment`	Safari
`button-bevel`	Firefox Chrome Safari Edge
`caps-lock-indicator`	Safari Edge
`caret`	Firefox Chrome Safari Edge
`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
`color-well`	Safari	`input type=color`
`continuous-capacity-level-indicator`	Safari
`default-button`	Safari Edge
`discrete-capacity-level-indicator`	Safari
`inner-spin-button`	Firefox Chrome Safari
`image-controls-button`	Safari
`list-button`	Safari	datalist
`listitem`	Firefox Chrome Safari Edge
`media-enter-fullscreen-button`	Chrome Safari
`media-exit-fullscreen-button`	Chrome Safari
`media-fullscreen-volume-slider`	Safari
`media-fullscreen-volume-slider-thumb`	Safari
`media-mute-button`	Chrome Safari Edge
`media-play-button`	Chrome Safari Edge
`media-overlay-play-button`	Chrome Safari
`media-return-to-realtime-button`	Safari
`media-rewind-button`	Safari
`media-seek-back-button`	Safari Edge
`media-seek-forward-button`	Safari Edge
`media-toggle-closed-captions-button`	Chrome Safari
`media-slider`	Chrome Safari Edge
`media-sliderthumb`	Chrome Safari Edge
`media-volume-slider-container`	Chrome Safari
`media-volume-slider-mute-button`	Safari
`media-volume-slider`	Chrome Safari
`media-volume-sliderthumb`	Chrome Safari
`media-controls-background`	Chrome Safari
`media-controls-dark-bar-background`	Safari
`media-controls-fullscreen-background`	Chrome Safari
`media-controls-light-bar-background`	Safari
`media-current-time-display`	Chrome Safari
`media-time-remaining-display`	Chrome Safari
`menulist-text`	Firefox Chrome Safari Edge
`menulist-textfield`	Firefox Chrome Safari Edge	The element is styled as the text field for a menulist. (Not implemented for the Windows platform)
`meterbar`	Firefox	Use `meter` instead.
`number-input`	Firefox
`progress-bar-value`	Chrome Safari
`progressbar`	Firefox	The element is styled like a progress bar. Use `progress-bar` instead
`progressbar-vertical`	Firefox
`range`	Firefox
`range-thumb`	Firefox
`rating-level-indicator`	Safari
`relevancy-level-indicator`	Safari
`scale-horizontal`	Firefox
`scalethumbend`	Firefox
`scalethumb-horizontal`	Firefox
`scalethumbstart`	Firefox
`scalethumbtick`	Firefox
`scalethumb-vertical`	Firefox
`scale-vertical`	Firefox
`scrollbarthumb-horizontal`	Firefox
`scrollbarthumb-vertical`	Firefox
`scrollbartrack-horizontal`	Firefox
`scrollbartrack-vertical`	Firefox
`searchfield-decoration`	Safari Edge
`searchfield-results-decoration`	Chrome Safari Edge	(Works on Chrome 51 on Windows 7)
`searchfield-results-button`	Safari Edge
`searchfield-cancel-button`	Chrome Safari Edge
`snapshotted-plugin-overlay`	Safari
`sheet`	None
`slider-vertical`	Chrome Safari Edge
`sliderthumb-horizontal`	Chrome Safari Edge
`sliderthumb-vertical`	Chrome Safari Edge
`textfield-multiline`	Firefox	Use `textarea` instead.
`-apple-pay-button`	Safari	iOS and macOS only. Available on the web starting in iOS 10.1 and macOS 10.12.1

Formal definition

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

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

appearance = 
  none              | (en-US)
  auto              | (en-US)
  <compat-auto>     | (en-US)
  <compat-special>  

<compat-auto> = 
  searchfield        | (en-US)
  textarea           | (en-US)
  push-button        | (en-US)
  slider-horizontal  | (en-US)
  checkbox           | (en-US)
  radio              | (en-US)
  square-button      | (en-US)
  menulist           | (en-US)
  listbox            | (en-US)
  meter              | (en-US)
  progress-bar       | (en-US)
  button             

<compat-special> = 
  textfield        | (en-US)
  menulist-button

Примеры

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

.exampleone {
  -moz-appearance: toolbarbutton;
}

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

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

Specification
CSS Basic User Interface Module Level 4 # appearance-switching

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

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

BCD tables only load in the browser

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

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