appearance (-moz-appearance, -webkit-appearance)
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2022.
Экспериментальная возможность: Это экспериментальная технология
Так как спецификация этой технологии ещё не стабилизировалась, смотрите таблицу совместимости по поводу использования в различных браузерах. Также заметьте, что синтаксис и поведение экспериментальной технологии может измениться в будущих версиях браузеров, вслед за изменениями спецификации.
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 | Browser | Description |
---|---|---|
none |
Firefox Chrome Safari Edge | Hides certain features of widgets, such as arrow displayed in select element, indicating that list can be expanded. |
auto |
Firefox Chrome Edge |
The user agent selects the appropriate special styling based on the
element. Acts as none on elements with no special styling.
|
menulist-button |
Firefox Chrome Safari Edge | |
textfield |
Firefox Chrome Safari Edge | |
The following values are treated as equivalent to auto :
|
||
button |
Firefox Chrome Safari Edge | The element used to be drawn like a button. |
checkbox |
Firefox Chrome Safari Edge | The element used to be drawn like a checkbox, including only the actual "checkbox" portion. |
listbox |
Firefox Chrome Safari Edge | |
menulist |
Firefox Chrome Safari Edge | |
meter |
Chrome Safari Firefox | |
progress-bar |
Chrome Safari Firefox | |
push-button |
Chrome Safari Edge | |
radio |
Firefox Chrome Safari Edge | The element used to be drawn like a radio button, including only the actual "radio button" portion. |
searchfield |
Firefox Chrome Safari Edge | |
slider-horizontal |
Chrome Safari Edge | |
square-button |
Chrome Safari Edge | |
textarea |
Firefox Chrome Safari Edge |
Non-standard keywords
The following values may be operational on historical browser versions using -moz-appearance
or -webkit-appearance
prefix, but not on the standard appearance
property.
Value | Browser | Description |
---|---|---|
attachment |
Safari | |
borderless-attachment |
Safari | |
button-bevel |
Firefox Chrome Safari Edge | |
caps-lock-indicator |
Safari Edge | |
caret |
Firefox Chrome Safari Edge | |
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 | |
inner-spin-button |
Firefox Chrome Safari | |
image-controls-button |
Safari | |
list-button |
Safari | datalist |
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 | |
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) |
meterbar |
Firefox | Use meter instead. |
number-input |
Firefox | |
progress-bar-value |
Chrome Safari | |
progressbar |
Firefox | The element is styled like a progress bar. Use progress-bar instead |
progressbar-vertical |
Firefox | |
range |
Firefox | |
range-thumb |
Firefox | |
rating-level-indicator |
Safari | |
relevancy-level-indicator |
Safari | |
scale-horizontal |
Firefox | |
scalethumbend |
Firefox | |
scalethumb-horizontal |
Firefox | |
scalethumbstart |
Firefox | |
scalethumbtick |
Firefox | |
scalethumb-vertical |
Firefox | |
scale-vertical |
Firefox | |
scrollbarthumb-horizontal |
Firefox | |
scrollbarthumb-vertical |
Firefox | |
scrollbartrack-horizontal |
Firefox | |
scrollbartrack-vertical |
Firefox | |
searchfield-decoration |
Safari Edge | |
searchfield-results-decoration |
Chrome Safari Edge | (Works on Chrome 51 on Windows 7) |
searchfield-results-button |
Safari Edge | |
searchfield-cancel-button |
Chrome Safari Edge | |
snapshotted-plugin-overlay |
Safari | |
sheet |
None | |
slider-vertical |
Chrome Safari Edge | |
sliderthumb-horizontal |
Chrome Safari Edge | |
sliderthumb-vertical |
Chrome Safari Edge | |
textfield-multiline |
Firefox | Use textarea instead. |
-apple-pay-button |
Safari | iOS and macOS only. Available on the web starting in iOS 10.1 and macOS 10.12.1 |
Formal definition
Начальное значение | none |
---|---|
Применяется к | все элементы |
Наследуется | нет |
Обработка значения | как указано |
Animation type | discrete |
Формальный синтаксис
Примеры
Нижеприведённый пример показывает, как сделать элемент, выглядящий как кнопка панели инструментов в Firefox:
.exampleone {
-moz-appearance: toolbarbutton;
}
Смотрите также this JSFiddle в качестве примера, показывающего как вы можете использовать appearance: none
для стилизации радио кнопок и чекбоксов.
Спецификации
Specification |
---|
CSS Basic User Interface Module Level 4 # appearance-switching |
Начальное значение | none |
---|---|
Применяется к | все элементы |
Наследуется | нет |
Обработка значения | как указано |
Animation type | discrete |
Совместимость с браузерами
BCD tables only load in the browser
Смотрите также
- Definition of
appearance
in CSS 3 Basic User Interface (Candidate Recommendation from 2004-05-11). - Dropped CSS3 features from the UI spec.4