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

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

none | (en-US) auto | (en-US) textfield | (en-US) menulist-button | (en-US) <compat-auto>

где
<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

Примеры

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

.exampleone {
  -moz-appearance: toolbarbutton;
}

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

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

Спецификация Статус Комментарии
CSS Basic User Interface Module Level 4
Определение 'appearance' в этой спецификации.
Рабочий черновик Первое определение.

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

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

BCD tables only load in the browser

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