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

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

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

The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

Это свойство часто используется в таблицах стилей 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> является одним из нижеследующих ключевых свойств:

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

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