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 Demo Browser Description
none Firefox Chrome Safari Edge No special styling is applied. This is the default.
auto  Experimental None The user agent selects the appropriate special styling based on the element. Acts as none on elements with no special styling.
attachment  Non-Standard Safari  
borderless-attachment  Non-Standard Safari  
button  Non-Standard Firefox Chrome Safari Edge The element is drawn like a button.
button-arrow-down  Non-Standard Firefox Removed in FF 64
button-arrow-next  Non-Standard Firefox Removed in FF 64
button-arrow-previous  Non-Standard Firefox Removed in FF 64
button-arrow-up  Non-Standard Firefox Removed in FF 64
button-bevel  Non-Standard Firefox Chrome Safari Edge  
button-focus  Non-Standard Firefox Removed in FF 64
caps-lock-indicator  Non-Standard Safari Edge  
caret  Non-Standard Firefox Chrome Safari Edge  
checkbox  Non-Standard Firefox Chrome Safari Edge The element is drawn like a checkbox, including only the actual "checkbox" portion.
checkbox-container  Non-Standard 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  Non-Standard Firefox  
checkmenuitem  Non-Standard Firefox  
color-well  Non-Standard Safari input type=color
continuous-capacity-level-indicator  Non-Standard Safari  
default-button  Non-Standard Safari Edge  
discrete-capacity-level-indicator  Non-Standard Safari  
dualbutton  Non-Standard Firefox Removed in FF 64
groupbox  Non-Standard Firefox Removed in FF 64
inner-spin-button  Non-Standard Firefox Chrome Safari  
image-controls-button  Non-Standard Safari  
list-button  Non-Standard Safari datalist
listbox  Non-Standard Firefox Chrome Safari Edge  
listitem  Non-Standard Firefox Chrome Safari Edge  
media-enter-fullscreen-button  Non-Standard Chrome Safari  
media-exit-fullscreen-button  Non-Standard Chrome Safari  
media-fullscreen-volume-slider  Non-Standard Safari  
media-fullscreen-volume-slider-thumb  Non-Standard Safari  
media-mute-button  Non-Standard Chrome Safari Edge  
media-play-button  Non-Standard Chrome Safari Edge  
media-overlay-play-button  Non-Standard Chrome Safari  
media-return-to-realtime-button  Non-Standard Safari  
media-rewind-button  Non-Standard Safari  
media-seek-back-button  Non-Standard Safari Edge  
media-seek-forward-button  Non-Standard Safari Edge  
media-toggle-closed-captions-button  Non-Standard Chrome Safari  
media-slider  Non-Standard Chrome Safari Edge  
media-sliderthumb  Non-Standard Chrome Safari Edge  
media-volume-slider-container  Non-Standard Chrome Safari  
media-volume-slider-mute-button  Non-Standard Safari  
media-volume-slider  Non-Standard Chrome Safari  
media-volume-sliderthumb  Non-Standard Chrome Safari  
media-controls-background  Non-Standard Chrome Safari  
media-controls-dark-bar-background  Non-Standard Safari  
media-controls-fullscreen-background  Non-Standard Chrome Safari  
media-controls-light-bar-background  Non-Standard Safari  
media-current-time-display  Non-Standard Chrome Safari  
media-time-remaining-display  Non-Standard Chrome Safari  
menuarrow  Non-Standard Firefox Removed in Firefox 64
menubar  Non-Standard Firefox Removed in Firefox 64
menucheckbox  Non-Standard Firefox Removed in Firefox 64
menuimage  Non-Standard Firefox Removed in Firefox 64
menuitem  Non-Standard Firefox Removed in Firefox 64, the element was styled as menu item, item is highlighted when hovered.
menuitemtext  Non-Standard Firefox Removed in FF 64
menulist  Non-Standard Firefox Chrome Safari Edge  
menulist-button  Non-Standard Firefox Chrome Safari Edge The element is styled as a button that would indicate a menulist can be opened.
menulist-text  Non-Standard Firefox Chrome Safari Edge  
menulist-textfield  Non-Standard Firefox Chrome Safari Edge The element is styled as the text field for a menulist. (Not implemented for the Windows platform)
menupopup  Non-Standard Firefox Removed in Firefox 64
menuradio  Non-Standard Firefox Removed in Firefox 64
menuseparator  Non-Standard Firefox Removed in Firefox 64
meter Chrome Safari Firefox New in Fx 64
meterbar  Non-Standard Firefox New in Fx 16. Use meter instead
meterchunk  Non-Standard Firefox New in Fx 16. Removed in Firefox 64.
number-input  Non-Standard Firefox  
progress-bar Chrome Safari Firefox New in Fx 64
progress-bar-value  Non-Standard Chrome Safari  
progressbar  Non-Standard Firefox The element is styled like a progress bar. Use progress-bar instead
progressbar-vertical  Non-Standard Firefox  
progresschunk  Non-Standard Firefox Removed in Firefox 64.
progresschunk-vertical  Non-Standard Firefox Removed in Firefox 64.
push-button  Non-Standard Chrome Safari Edge  
radio  Non-Standard Firefox Chrome Safari Edge The element is drawn like a radio button, including only the actual "radio button" portion.
radio-container  Non-Standard 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  Non-Standard Firefox Removed in Firefox 64.
radiomenuitem  Non-Standard Firefox Removed in Firefox 64.
range  Non-Standard Firefox  
range-thumb  Non-Standard Firefox  
rating-level-indicator  Non-Standard Safari  
resizer  Non-Standard Firefox Removed in Firefox 63
resizerpanel  Non-Standard Firefox Removed in Firefox 63.
scale-horizontal  Non-Standard Firefox  
scalethumbend  Non-Standard Firefox  
scalethumb-horizontal  Non-Standard Firefox  
scalethumbstart  Non-Standard Firefox  
scalethumbtick  Non-Standard Firefox  
scalethumb-vertical  Non-Standard Firefox  
scale-vertical  Non-Standard Firefox  
scrollbarbutton-down  Non-Standard Firefox Removed in Firefox 63.
scrollbarbutton-left  Non-Standard Firefox Removed in Firefox 63.
scrollbarbutton-right  Non-Standard Firefox Removed in Firefox 63.
scrollbarbutton-up  Non-Standard Firefox Removed in Firefox 63.
scrollbarthumb-horizontal  Non-Standard Firefox  
scrollbarthumb-vertical  Non-Standard Firefox  
scrollbartrack-horizontal  Non-Standard Firefox  
scrollbartrack-vertical  Non-Standard Firefox  
searchfield  Non-Standard Firefox Chrome Safari Edge  
searchfield-decoration  Non-Standard Safari Edge  
searchfield-results-decoration  Non-Standard Safari Edge  
searchfield-results-button  Non-Standard Safari Edge  
searchfield-cancel-button  Non-Standard Chrome Safari Edge  
snapshotted-plugin-overlay  Non-Standard Safari  
separator  Non-Standard Firefox Removed in Firefox 64.
sheet  Non-Standard None  
slider-horizontal  Non-Standard Chrome Safari Edge  
slider-vertical  Non-Standard Chrome Safari Edge  
sliderthumb-horizontal  Non-Standard Chrome Safari Edge  
sliderthumb-vertical  Non-Standard Chrome Safari Edge  
spinner  Non-Standard Firefox Removed in Firefox 64.
spinner-downbutton  Non-Standard Firefox Removed in Firefox 64.
spinner-textfield  Non-Standard Firefox Removed in Firefox 64.
spinner-upbutton  Non-Standard Firefox Removed in Firefox 64.
splitter  Non-Standard Firefox Removed in Firefox 64.
square-button  Non-Standard Chrome Safari Edge  
statusbar  Non-Standard Firefox Removed in Firefox 64.
statusbarpanel  Non-Standard Firefox Removed in Firefox 64.
tab  Non-Standard Firefox Removed in Firefox 64
tabpanel  Non-Standard Firefox Removed in Firefox 64.
tabpanels  Non-Standard Firefox Removed in Firefox 64
tab-scroll-arrow-back  Non-Standard Firefox Removed in Firefox 64.
tab-scroll-arrow-forward  Non-Standard Firefox Removed in Firefox 64.
textarea Firefox Chrome Safari Edge  
textfield  Non-Standard Firefox Chrome Safari Edge  
textfield-multiline  Non-Standard Firefox Use textarea instead
toolbar  Non-Standard Firefox Removed in Firefox 64.
toolbarbutton  Non-Standard Firefox Removed in Firefox 64.
toolbarbutton-dropdown  Non-Standard Firefox Removed in Firefox 64.
toolbargripper  Non-Standard Firefox Removed in Firefox 64.
toolbox  Non-Standard Firefox Removed in Firefox 64.
tooltip  Non-Standard Firefox Removed in Firefox 64.
treeheader  Non-Standard Firefox Removed in Firefox 64.
treeheadercell  Non-Standard Firefox Removed in Firefox 64.
treeheadersortarrow  Non-Standard Firefox Removed in Firefox 64.
treeitem  Non-Standard Firefox Removed in Firefox 64.
treeline  Non-Standard Firefox Removed in Firefox 64.
treetwisty  Non-Standard Firefox Removed in Firefox 64.
treetwistyopen  Non-Standard Firefox Removed in Firefox 64.
treeview  Non-Standard Firefox Removed in Firefox 64.
relevancy-level-indicator  Non-Standard Safari  
-moz-win-borderless-glass  Non-Standard Firefox Removed in Firefox 64. This style applies the Aero Glass effect -- but without a border -- to the element.
-moz-win-browsertabbar-toolbox  Non-Standard Firefox Removed in Firefox 64. This toolbox style is meant to be used for the tab bar in a browser.
-moz-win-communicationstext  Non-Standard Firefox Removed in Firefox 64.
-moz-win-communications-toolbox  Non-Standard 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  Non-Standard Firefox Removed in Firefox 64. This styles is used to exclude the Aero Glass effect on the element.
-moz-win-glass  Non-Standard Firefox Removed in Firefox 64. This style applies the Aero Glass effect to the element.
-moz-win-media-toolbox  Non-Standard 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  Non-Standard Firefox Removed in Firefox 64.
-moz-window-button-box-maximized  Non-Standard Firefox Removed in Firefox 64.
-moz-window-button-close  Non-Standard Firefox Removed in Firefox 64.
-moz-window-button-maximize  Non-Standard Firefox Removed in Firefox 64.
-moz-window-button-minimize  Non-Standard Firefox Removed in Firefox 64.
-moz-window-button-restore  Non-Standard Firefox Removed in Firefox 64.
-moz-window-frame-bottom  Non-Standard Firefox Removed in Firefox 64.
-moz-window-frame-left  Non-Standard Firefox Removed in Firefox 64.
-moz-window-frame-right  Non-Standard Firefox Removed in Firefox 64.
-moz-window-titlebar  Non-Standard Firefox Removed in Firefox 64.
-moz-window-titlebar-maximized  Non-Standard Firefox Removed in Firefox 64.
-apple-pay-button  Non-Standard Safari iOS and macOS only. Available on the web starting in iOS 10.1 and macOS 10.12.1

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

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 typediscrete

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

BCD tables only load in the browser

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