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.

/* 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> является одним из нижеследующих ключевых свойств:

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 для стилизации радио кнопок и чекбоксов.

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