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 Firefox Chrome Safari Edge No special styling is applied. This is the default.
auto  None The user agent selects the appropriate special styling based on the element. Acts as none on elements with no special styling.
attachment  Safari  
borderless-attachment  Safari  
button  Firefox Chrome Safari Edge The element is drawn like a button.
button-arrow-down  Firefox Removed in FF 64
button-arrow-next  Firefox Removed in FF 64
button-arrow-previous  Firefox Removed in FF 64
button-arrow-up  Firefox Removed in FF 64
button-bevel  Firefox Chrome Safari Edge  
button-focus  Firefox Removed in FF 64
caps-lock-indicator  Safari Edge  
caret  Firefox Chrome Safari Edge  
checkbox  Firefox Chrome Safari Edge The element is drawn like a checkbox, including only the actual "checkbox" portion.
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  
dualbutton  Firefox Removed in FF 64
groupbox  Firefox Removed in FF 64
inner-spin-button  Firefox Chrome Safari  
image-controls-button  Safari  
list-button  Safari datalist
listbox  Firefox Chrome Safari Edge  
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  
menuarrow  Firefox Removed in Firefox 64
menubar  Firefox Removed in Firefox 64
menucheckbox  Firefox Removed in Firefox 64
menuimage  Firefox Removed in Firefox 64
menuitem  Firefox Removed in Firefox 64, the element was styled as menu item, item is highlighted when hovered.
menuitemtext  Firefox Removed in FF 64
menulist  Firefox Chrome Safari Edge  
menulist-button  Firefox Chrome Safari Edge The element is styled as a button that would indicate a menulist can be opened.
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)
menupopup  Firefox Removed in Firefox 64
menuradio  Firefox Removed in Firefox 64
menuseparator  Firefox Removed in Firefox 64
meter Chrome Safari Firefox New in Fx 64
meterbar  Firefox New in Fx 16. Use meter instead
meterchunk  Firefox New in Fx 16. Removed in Firefox 64.
number-input  Firefox  
progress-bar Chrome Safari Firefox New in Fx 64
progress-bar-value  Chrome Safari  
progressbar  Firefox The element is styled like a progress bar. Use progress-bar instead
progressbar-vertical  Firefox  
progresschunk  Firefox Removed in Firefox 64.
progresschunk-vertical  Firefox Removed in Firefox 64.
push-button  Chrome Safari Edge  
radio  Firefox Chrome Safari Edge The element is drawn like a radio button, including only the actual "radio button" portion.
radio-container  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  Firefox Removed in Firefox 64.
radiomenuitem  Firefox Removed in Firefox 64.
range  Firefox  
range-thumb  Firefox  
rating-level-indicator  Safari  
resizer  Firefox Removed in Firefox 63
resizerpanel  Firefox Removed in Firefox 63.
scale-horizontal  Firefox  
scalethumbend  Firefox  
scalethumb-horizontal  Firefox  
scalethumbstart  Firefox  
scalethumbtick  Firefox  
scalethumb-vertical  Firefox  
scale-vertical  Firefox  
scrollbarbutton-down  Firefox Removed in Firefox 63.
scrollbarbutton-left  Firefox Removed in Firefox 63.
scrollbarbutton-right  Firefox Removed in Firefox 63.
scrollbarbutton-up  Firefox Removed in Firefox 63.
scrollbarthumb-horizontal  Firefox  
scrollbarthumb-vertical  Firefox  
scrollbartrack-horizontal  Firefox  
scrollbartrack-vertical  Firefox  
searchfield  Firefox Chrome Safari Edge  
searchfield-decoration  Safari Edge  
searchfield-results-decoration  Safari Edge  
searchfield-results-button  Safari Edge  
searchfield-cancel-button  Chrome Safari Edge  
snapshotted-plugin-overlay  Safari  
separator  Firefox Removed in Firefox 64.
sheet  None  
slider-horizontal  Chrome Safari Edge  
slider-vertical  Chrome Safari Edge  
sliderthumb-horizontal  Chrome Safari Edge  
sliderthumb-vertical  Chrome Safari Edge  
spinner  Firefox Removed in Firefox 64.
spinner-downbutton  Firefox Removed in Firefox 64.
spinner-textfield  Firefox Removed in Firefox 64.
spinner-upbutton  Firefox Removed in Firefox 64.
splitter  Firefox Removed in Firefox 64.
square-button  Chrome Safari Edge  
statusbar  Firefox Removed in Firefox 64.
statusbarpanel  Firefox Removed in Firefox 64.
tab  Firefox Removed in Firefox 64
tabpanel  Firefox Removed in Firefox 64.
tabpanels  Firefox Removed in Firefox 64
tab-scroll-arrow-back  Firefox Removed in Firefox 64.
tab-scroll-arrow-forward  Firefox Removed in Firefox 64.
textarea Firefox Chrome Safari Edge  
textfield  Firefox Chrome Safari Edge  
textfield-multiline  Firefox Use textarea instead
toolbar  Firefox Removed in Firefox 64.
toolbarbutton  Firefox Removed in Firefox 64.
toolbarbutton-dropdown  Firefox Removed in Firefox 64.
toolbargripper  Firefox Removed in Firefox 64.
toolbox  Firefox Removed in Firefox 64.
tooltip  Firefox Removed in Firefox 64.
treeheader  Firefox Removed in Firefox 64.
treeheadercell  Firefox Removed in Firefox 64.
treeheadersortarrow  Firefox Removed in Firefox 64.
treeitem  Firefox Removed in Firefox 64.
treeline  Firefox Removed in Firefox 64.
treetwisty  Firefox Removed in Firefox 64.
treetwistyopen  Firefox Removed in Firefox 64.
treeview  Firefox Removed in Firefox 64.
relevancy-level-indicator  Safari  
-moz-win-borderless-glass  Firefox Removed in Firefox 64. This style applies the Aero Glass effect -- but without a border -- to the element.
-moz-win-browsertabbar-toolbox  Firefox Removed in Firefox 64. This toolbox style is meant to be used for the tab bar in a browser.
-moz-win-communicationstext  Firefox Removed in Firefox 64.
-moz-win-communications-toolbox  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  Firefox Removed in Firefox 64. This styles is used to exclude the Aero Glass effect on the element.
-moz-win-glass  Firefox Removed in Firefox 64. This style applies the Aero Glass effect to the element.
-moz-win-media-toolbox  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  Firefox Removed in Firefox 64.
-moz-window-button-box-maximized  Firefox Removed in Firefox 64.
-moz-window-button-close  Firefox Removed in Firefox 64.
-moz-window-button-maximize  Firefox Removed in Firefox 64.
-moz-window-button-minimize  Firefox Removed in Firefox 64.
-moz-window-button-restore  Firefox Removed in Firefox 64.
-moz-window-frame-bottom  Firefox Removed in Firefox 64.
-moz-window-frame-left  Firefox Removed in Firefox 64.
-moz-window-frame-right  Firefox Removed in Firefox 64.
-moz-window-titlebar  Firefox Removed in Firefox 64.
-moz-window-titlebar-maximized  Firefox Removed in Firefox 64.
-apple-pay-button  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 typediscrete
Канонический порядокper grammar

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

Update compatibility data on GitHub
КомпьютерыМобильные
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome для AndroidFirefox для AndroidOpera для AndroidSafari on iOSSamsung Internet
appearance
Экспериментальная
Chrome Частичная поддержка 1
С префиксом
Частичная поддержка 1
С префиксом
С префиксом Требует вендорный префикс: -webkit-
Edge Частичная поддержка 12
С префиксом
Частичная поддержка 12
С префиксом
С префиксом Требует вендорный префикс: -webkit-
Firefox Частичная поддержка 1
С префиксом
Частичная поддержка 1
С префиксом
С префиксом Требует вендорный префикс: -moz-
Частичная поддержка 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-
Частичная поддержка 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 Полная поддержка 1Edge Полная поддержка 12Firefox Полная поддержка 1IE Нет поддержки НетOpera Полная поддержка 15Safari Полная поддержка 3WebView Android Полная поддержка 1Chrome Android Полная поддержка 18Firefox Android Полная поддержка 4Opera Android Полная поддержка 14Safari iOS Полная поддержка 1Samsung 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 Полная поддержка 1Edge Частичная поддержка 12Firefox Частичная поддержка 1IE Нет поддержки НетOpera Полная поддержка 15Safari Полная поддержка 3WebView Android Полная поддержка ≤37Chrome Android Полная поддержка 18Firefox Android Частичная поддержка 4Opera Android Полная поддержка 14Safari iOS Полная поддержка 1Samsung Internet Android Полная поддержка 1.0
none
Экспериментальная
Chrome Полная поддержка 1Edge Полная поддержка 12Firefox Полная поддержка 54
Полная поддержка 54
Частичная поддержка 1
Замечания
Замечания Doesn't work with <input type="checkbox"> and <input type="radio">.
IE Нет поддержки НетOpera Полная поддержка 15Safari Полная поддержка 3WebView Android Полная поддержка 1Chrome Android Полная поддержка 18Firefox Android Частичная поддержка 4
Замечания
Частичная поддержка 4
Замечания
Замечания Doesn't work with <input type="checkbox"> and <input type="radio">.
Opera Android Полная поддержка 14Safari iOS Полная поддержка 3Samsung Internet Android Полная поддержка 4.0
textfield
Экспериментальная
Chrome Полная поддержка 1Edge Полная поддержка 12Firefox Полная поддержка 1IE Нет поддержки НетOpera Полная поддержка 15Safari Полная поддержка 3WebView Android Полная поддержка 1Chrome Android Полная поддержка 18Firefox Android Полная поддержка 4Opera Android Полная поддержка 14Safari iOS Полная поддержка 1Samsung Internet Android Полная поддержка 1.0

Легенда

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

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