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 |
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 | (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 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