Это экспериментальная технология
Так как спецификация этой технологии ещё не стабилизировалась, смотрите таблицу совместимости по поводу использования в различных браузерах. Также заметьте, что синтаксис и поведение экспериментальной технологии может измениться в будущих версиях браузеров, вслед за изменениями спецификации.
CSS свойство -moz-appearance используется в Gecko (Firefox) для отображения элемента, используя базовые стили платформы на основе темы операционной системы.
Свойство -webkit-appearance используется в браузерах WebKit-based (например, Safari) и Blink-based (например, Chrome, Opera) для того же эффекта. Заметьте, что Firefox и Edge также поддерживают -webkit-appearance, для обеспечения совместимости.
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Это свойство часто используется в таблицах стилей 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 |
div{ color: black;
-moz-appearance:none;
-webkit-appearance:none;
appearance:none; }
<div>Lorem</div> |
Firefox Chrome Safari Edge | No special styling is applied. This is the default. |
auto |
div{ color: black;
-moz-appearance: auto;
-webkit-appearance: auto;
appearance:auto; }
<div>Lorem</div> |
None | The user agent selects the appropriate special styling based on the element. Acts as none on elements with no special styling. |
attachment |
div{ color: black;
-moz-appearance: attachment;
-webkit-appearance: attachment; }
<div>Lorem</div> |
Safari | |
borderless-attachment |
div{ color: black;
-moz-appearance: borderless-attachment;
-webkit-appearance: borderless-attachment; }
<div>Lorem</div> |
Safari | |
button |
div { color: black;
-moz-appearance: button;
-webkit-appearance: button; }
<div>Lorem</div> |
Firefox Chrome Safari Edge | The element is drawn like a button. |
button-arrow-down |
div { color: black;
-moz-appearance: button-arrow-down;
-webkit-appearance: button-arrow-down; }
<div>Lorem</div> |
Firefox | Removed in FF 64 |
button-arrow-next |
div { color: black;
-moz-appearance: button-arrow-next;
-webkit-appearance: button-arrow-next; }
<div>Lorem</div> |
Firefox | Removed in FF 64 |
button-arrow-previous |
div { color: black;
-moz-appearance: button-arrow-previous;
-webkit-appearance: button-arrow-previous; }
<div>Lorem</div> |
Firefox | Removed in FF 64 |
button-arrow-up |
div { color: black;
-moz-appearance: button-arrow-up;
-webkit-appearance: button-arrow-up; }
<div>Lorem</div> |
Firefox | Removed in FF 64 |
button-bevel |
div { color: black;
-moz-appearance: button-bevel;
-webkit-appearance: button-bevel; }
<div>Lorem</div> |
Firefox Chrome Safari Edge | |
button-focus |
div { color: black;
-moz-appearance: button-focus;
-webkit-appearance: button-focus; }
<div>Lorem</div> |
Firefox | Removed in FF 64 |
caps-lock-indicator |
div{ color: black;
-moz-appearance: caps-lock-indicator;
-webkit-appearance: caps-lock-indicator; }
<div>Lorem</div> |
Safari Edge | |
caret |
div { color: black;
-moz-appearance: caret;
-webkit-appearance: caret; }
<div>Lorem</div> |
Firefox Chrome Safari Edge | |
checkbox |
div { color: black;
-moz-appearance: checkbox;
-webkit-appearance: checkbox; }
<div>Lorem</div> |
Firefox Chrome Safari Edge | The element is drawn like a checkbox, including only the actual "checkbox" portion. |
checkbox-container |
div { color: black;
-moz-appearance: checkbox-container;
-webkit-appearance: checkbox-container; }
<div>Lorem</div> |
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 |
div { color: black;
-moz-appearance: checkbox-label;
-webkit-appearance: checkbox-label; }
<div>Lorem</div> |
Firefox | |
checkmenuitem |
Firefox | ||
color-well |
div{ color: black;
-moz-appearance: color-well;
-webkit-appearance: color-well; }
<div>Lorem</div> |
Safari | input type=color |
continuous-capacity-level-indicator |
div{ color: black;
-moz-appearance: continuous-capacity-level-indicator;
-webkit-appearance: continuous-capacity-level-indicator; }
<div>Lorem</div> |
Safari | |
default-button |
div{ color: black;
-moz-appearance: default-button;
-webkit-appearance: default-button; }
<div>Lorem</div> |
Safari Edge | |
discrete-capacity-level-indicator |
div{ color: black;
-moz-appearance: discrete-capacity-level-indicator;
-webkit-appearance: discrete-capacity-level-indicator; }
<div>Lorem</div> |
Safari | |
dualbutton |
div { color: black;
-moz-appearance: dualbutton;
-webkit-appearance: dualbutton; }
<div>Lorem</div> |
Firefox | Removed in FF 64 |
groupbox |
div { color: black;
-moz-appearance: groupbox;
-webkit-appearance: groupbox; }
<div>Lorem</div> |
Firefox | Removed in FF 64 |
inner-spin-button |
div{ color: black;
-webkit-appearance: inner-spin-button; }
<div>Lorem</div> |
Firefox Chrome Safari | |
image-controls-button |
div{ color: black;
-moz-appearance: image-controls-button;
-webkit-appearance: image-controls-button; }
<div>Lorem</div> |
Safari | |
list-button |
div{ color: black;
-moz-appearance: list-button;
-webkit-appearance: list-button; }
<div>Lorem</div> |
Safari | datalist |
listbox |
div { color: black; height:20px;
-moz-appearance: listbox;
-webkit-appearance: listbox; }
<div>Lorem</div> |
Firefox Chrome Safari Edge | |
listitem |
div { color: black;
-moz-appearance: listitem;
-webkit-appearance: listitem; }
<div>Lorem</div> |
Firefox Chrome Safari Edge | |
media-enter-fullscreen-button |
div{ color: black;
-webkit-appearance: media-enter-fullscreen-button; }
<div>Lorem</div> |
Chrome Safari | |
media-exit-fullscreen-button |
div{ color: black;
-webkit-appearance: media-exit-fullscreen-button; }
<div>Lorem</div> |
Chrome Safari | |
media-fullscreen-volume-slider |
div{ color: black;
-moz-appearance: media-fullscreen-volume-slider;
-webkit-appearance: media-fullscreen-volume-slider; }
<div>Lorem</div> |
Safari | |
media-fullscreen-volume-slider-thumb |
div{ color: black;
-moz-appearance: media-fullscreen-volume-slider-thumb;
-webkit-appearance: media-fullscreen-volume-slider-thumb; }
<div>Lorem</div> |
Safari | |
media-mute-button |
div{ color: black;
-webkit-appearance: media-mute-button; }
<div>Lorem</div> |
Chrome Safari Edge | |
media-play-button |
div{ color: black;
-webkit-appearance: media-play-button; }
<div>Lorem</div> |
Chrome Safari Edge | |
media-overlay-play-button |
div{ color: black;
-webkit-appearance: media-overlay-play-button; }
<div>Lorem</div> |
Chrome Safari | |
media-return-to-realtime-button |
div{ color: black;
-moz-appearance: media-return-to-realtime-button;
-webkit-appearance: media-return-to-realtime-button; }
<div>Lorem</div> |
Safari | |
media-rewind-button |
div{ color: black;
-moz-appearance: media-rewind-button;
-webkit-appearance: media-rewind-button; }
<div>Lorem</div> |
Safari | |
media-seek-back-button |
div{ color: black;
-moz-appearance: media-seek-back-button;
-webkit-appearance: media-seek-back-button; }
<div>Lorem</div> |
Safari Edge | |
media-seek-forward-button |
div{ color: black;
-moz-appearance: media-seek-forward-button;
-webkit-appearance: media-seek-forward-button; }
<div>Lorem</div> |
Safari Edge | |
media-toggle-closed-captions-button |
div{ color: black;
-webkit-appearance: media-toggle-closed-captions-button; }
<div>Lorem</div> |
Chrome Safari | |
media-slider |
div{ color: black;
-webkit-appearance: media-slider; }
<div>Lorem</div> |
Chrome Safari Edge | |
media-sliderthumb |
div{ color: black;
-webkit-appearance: media-sliderthumb; }
<div>Lorem</div> |
Chrome Safari Edge | |
media-volume-slider-container |
div{ color: black;
-webkit-appearance: media-volume-slider-container; }
<div>Lorem</div> |
Chrome Safari | |
media-volume-slider-mute-button |
div{ color: black;
-moz-appearance: media-volume-slider-mute-button;
-webkit-appearance: media-volume-slider-mute-button; }
<div>Lorem</div> |
Safari | |
media-volume-slider |
div{ color: black;
-webkit-appearance: media-volume-slider; }
<div>Lorem</div> |
Chrome Safari | |
media-volume-sliderthumb |
div{ color: black;
-webkit-appearance: media-volume-slider-thumb; }
<div>Lorem</div> |
Chrome Safari | |
media-controls-background |
div{ color: black;
-webkit-appearance: media-controls-background; }
<div>Lorem</div> |
Chrome Safari | |
media-controls-dark-bar-background |
div{ color: black;
-moz-appearance: media-controls-dark-bar-background;
-webkit-appearance: media-controls-dark-bar-background; }
<div>Lorem</div> |
Safari | |
media-controls-fullscreen-background |
div{ color: black;
-webkit-appearance: media-controls-fullscreen-background; }
<div>Lorem</div> |
Chrome Safari | |
media-controls-light-bar-background |
div{ color: black;
-moz-appearance: media-controls-light-bar-background;
-webkit-appearance: media-controls-light-bar-background; }
<div>Lorem</div> |
Safari | |
media-current-time-display |
div{ color: black;
-webkit-appearance: media-current-time-display; }
<div>Lorem</div> |
Chrome Safari | |
media-time-remaining-display |
div{ color: black;
-webkit-appearance: media-time-remaining-display; }
<div>Lorem</div> |
Chrome Safari | |
menuarrow |
div { color: black;
-moz-appearance: menuarrow;
-webkit-appearance: menuarrow; }
<div>Lorem</div> |
Firefox | Removed in Firefox 64 |
menubar |
div { color: balck;
-moz-appearance: menubar;
-webkit-appearance: menubar; }
<div>Lorem</div> |
Firefox | Removed in Firefox 64 |
menucheckbox |
div { color: black;
-moz-appearance: menucheckbox;
-webkit-appearance: menucheckbox; }
<div>Lorem</div> |
Firefox | Removed in Firefox 64 |
menuimage |
div { color: black;
-moz-appearance: menuimage;
-webkit-appearance: menuimage; }
<div>Lorem</div> |
Firefox | Removed in Firefox 64 |
menuitem |
div { color: black;
-moz-appearance: menuitem;
-webkit-appearance: menuitem; }
<div>Lorem</div> |
Firefox | Removed in Firefox 64, the element was styled as menu item, item is highlighted when hovered. |
menuitemtext |
div { color: black;
-moz-appearance: menuitemtext;
-webkit-appearance: menuitemtext; }
<div>Lorem</div> |
Firefox | Removed in FF 64 |
menulist |
div { color: black;
-moz-appearance: menulist;
-webkit-appearance: menulist; }
<div>Lorem</div> |
Firefox Chrome Safari Edge | |
menulist-button |
div { color: black;
-moz-appearance: menulist-button;
-webkit-appearance: menulist-button; }
<div>Lorem</div> |
Firefox Chrome Safari Edge | The element is styled as a button that would indicate a menulist can be opened. |
menulist-text |
div { color: black;
-moz-appearance: menulist-text;
-webkit-appearance: menulist-text; }
<div>Lorem</div> |
Firefox Chrome Safari Edge | |
menulist-textfield |
div { color: black;
-moz-appearance: menulist-textfield;
-webkit-appearance: menulist-textfield; }
<div>Lorem</div> |
Firefox Chrome Safari Edge | The element is styled as the text field for a menulist. (Not implemented for the Windows platform) |
menupopup |
div { color: black;
-moz-appearance: menupopup;
-webkit-appearance: menupopup; }
<div>Lorem</div> |
Firefox | Removed in Firefox 64 |
menuradio |
div { color: black;
-moz-appearance: menuradio;
-webkit-appearance: menuradio; }
<div>Lorem</div> |
Firefox | Removed in Firefox 64 |
menuseparator |
div { color: transparent;
-moz-appearance: menuseparator;
-webkit-appearance: menuseparator; }
<div>Lorem</div> |
Firefox | Removed in Firefox 64 |
meter |
div{ color: black;
-webkit-appearance: meter; }
<div>Lorem</div> |
Chrome Safari Firefox | New in Fx 64 |
meterbar |
div { color: black;
-moz-appearance: meterbar;
-webkit-appearance: meterbar; }
<div>Lorem</div> |
Firefox | New in Fx 16. Use meter instead |
meterchunk |
div { color: black;
-moz-appearance: meterchunk;
-webkit-appearance: meterchunk; }
<div>Lorem</div> |
Firefox | New in Fx 16. Removed in Firefox 64. |
number-input |
div { color: black;
-moz-appearance: number-input;
-webkit-appearance: number-input; }
<div>Lorem</div> |
Firefox | |
progress-bar |
div{ color: black;
-webkit-appearance: progress-bar; }
<div>Lorem</div> |
Chrome Safari Firefox | New in Fx 64 |
progress-bar-value |
div{ color: black;
-webkit-appearance: progress-bar-value; }
<div>Lorem</div> |
Chrome Safari | |
progressbar |
div { color: black;
-moz-appearance: progressbar;
-webkit-appearance: progressbar; }
<div>Lorem</div> |
Firefox | The element is styled like a progress bar. Use progress-bar instead |
progressbar-vertical |
div { color: transparent;
-moz-appearance: progressbar-vertical;
-webkit-appearance: preogressbar-vertical; }
<div>Lorem</div> |
Firefox | |
progresschunk |
div { color: black;
-moz-appearance: progresschunk;
-webkit-appearance: progresschunk; }
<div>Lorem</div> |
Firefox | Removed in Firefox 64. |
progresschunk-vertical |
div { color: black;
-moz-appearance: progresschunk-vertical;
-webkit-appearance: progresschunk-vertical; }
<div>Lorem</div> |
Firefox | Removed in Firefox 64. |
push-button |
div{ color: black; -webkit-appearance: push-button; }
<div>Lorem</div> |
Chrome Safari Edge | |
radio |
div { color: black;
-moz-appearance: radio;
-webkit-appearance: radio; }
<div>Lorem</div> |
Firefox Chrome Safari Edge | The element is drawn like a radio button, including only the actual "radio button" portion. |
radio-container |
div { color: black;
-moz-appearance: radio-container;
-webkit-appearance: radio-container; }
<div>Lorem</div> |
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 |
div { color: black;
-moz-appearance: radio-label;
-webkit-appearance: radio-label; }
<div>Lorem</div> |
Firefox | Removed in Firefox 64. |
radiomenuitem |
div { color: black;
-moz-appearance: radiomenuitem;
-webkit-appearance: radiomenuitem; }
<div>Lorem</div> |
Firefox | Removed in Firefox 64. |
range |
div { color: black;
-moz-appearance: range;
-webkit-appearance: range; }
range
<div>Lorem</div> |
Firefox | |
range-thumb |
div { color: black;
-moz-appearance: range-thumb;
-webkit-appearance: range-thumb; }
<div>Lorem</div> |
Firefox | |
rating-level-indicator |
div{ color: black;
-moz-appearance: rating-level-indicator;
-webkit-appearance: rating-level-indicator; }
<div>Lorem</div> |
Safari | |
resizer |
div { color: transparent;
-moz-appearance: resizer;
-webkit-appearance: resizer; }
<div>Lorem</div> |
Firefox | Removed in Firefox 63 |
resizerpanel |
div { color: black;
-moz-appearance: resizerpanel;
-webkit-appearance: resizerpanel; }
<div>Lorem</div> |
Firefox | Removed in Firefox 63. |
scale-horizontal |
div { color: transparent;
-moz-appearance: scale-horizontal;
-webkit-appearance: scale-horizontal; }
<div>Lorem</div> |
Firefox | |
scalethumbend |
div { color: black;
-moz-appearance: scalethumbend;
-webkit-appearance: scalethumbend; }
<div>Lorem</div> |
Firefox | |
scalethumb-horizontal |
div { color: transparent;
-moz-appearance: scalethumb-horizontal;
-webkit-appearance: scalethumb-horizontal; }
<div>Lorem</div> |
Firefox | |
scalethumbstart |
div { color: black;
-moz-appearance: scalethumbstart;
-webkit-appearance: scalethumbstart; }
<div>Lorem</div> |
Firefox | |
scalethumbtick |
div { color: black;
-moz-appearance: scalethumbtick;
-webkit-appearance: scalethumbtick; }
<div>Lorem</div> |
Firefox | |
scalethumb-vertical |
div { color: black;
-moz-appearance: scalethumb-vertical;
-webkit-appearance: scalethumb-vertical; }
<div>Lorem</div> |
Firefox | |
scale-vertical |
div { color: transparent;
-moz-appearance: scale-vertical;
-webkit-appearance: scale-vertical; }
<div>Lorem</div> |
Firefox | |
scrollbarbutton-down |
div { color: black;
-moz-appearance: scrollbarbutton-down;
-webkit-appearance: scrollbarbutton-down; }
<div>Lorem</div> |
Firefox | Removed in Firefox 63. |
scrollbarbutton-left |
div { color: black;
-moz-appearance: scrollbarbutton-left;
-webkit-appearance: scrollbarbutton-left; }
<div>Lorem</div> |
Firefox | Removed in Firefox 63. |
scrollbarbutton-right |
div { color: black;
-moz-appearance: scrollbarbutton-right;
-webkit-appearance: scrollbarbutton-right; }
<div>Lorem</div> |
Firefox | Removed in Firefox 63. |
scrollbarbutton-up |
div { color: black;
-moz-appearance: scrollbarbutton-up;
-webkit-appearance: scrollbarbutton-up; }
<div>Lorem</div> |
Firefox | Removed in Firefox 63. |
scrollbarthumb-horizontal |
div { color: black;
-moz-appearance: scrollbarthumb-horizontal;
-webkit-appearance: scrollbarthumb-horizontal; }
<div>Lorem</div> |
Firefox | |
scrollbarthumb-vertical |
div { color: black;
-moz-appearance: scrollbarthumb-vertical;
-webkit-appearance: scrollbarthumb-vertical; }
<div>Lorem</div> |
Firefox | |
scrollbartrack-horizontal |
div { color: black;
-moz-appearance: scrollbartrack-horizontal;
-webkit-appearance: scrollbartrack-horizontal; }
<div>Lorem</div> |
Firefox | |
scrollbartrack-vertical |
div { color: black;
-moz-appearance: scrollbartrack-vertical;
-webkit-appearance: scrollbarbartrack-vertical; }
<div>Lorem</div> |
Firefox | |
searchfield |
div { color: black;
-moz-appearance: searchfield;
-webkit-appearance: searchfield; }
<div>Lorem</div> |
Firefox Chrome Safari Edge | |
searchfield-decoration |
div{ color: black;
-moz-appearance: searchfield-decoration;
-webkit-appearance: searchfield-decoration; }
<div>Lorem</div> |
Safari Edge | |
searchfield-results-decoration |
div{ color: black;
-moz-appearance: searchfield-results-decoration;
-webkit-appearance: searchfield-results-decoration; }
<div>Lorem</div> |
Safari Edge | |
searchfield-results-button |
div{ color: black;
-moz-appearance: searchfield-results-button;
-webkit-appearance: searchfield-results-button; }
<div>Lorem</div> |
Safari Edge | |
searchfield-cancel-button |
div{ color: black;
-webkit-appearance: searchfield-cancel-button; }
<div>Lorem</div> |
Chrome Safari Edge | |
snapshotted-plugin-overlay |
div{ color: black;
-moz-appearance: snapshotted-plugin-overlay;
-webkit-appearance: snapshotted-plugin-overlay; }
<div>Lorem</div> |
Safari | |
separator |
div { color: transparent;
-moz-appearance: separator;
-webkit-appearance: separator; }
<div>Lorem</div> |
Firefox | Removed in Firefox 64. |
sheet |
div { color: black;
-moz-appearance: sheet;
-webkit-appearance: sheet; }
<div>Lorem</div> |
None | |
slider-horizontal |
div{ color: black;
-webkit-appearance: slider-horizontal; }
<div>Lorem</div> |
Chrome Safari Edge | |
slider-vertical |
div{ color: black;
-webkit-appearance: slider-vertical; }
<div>Lorem</div> |
Chrome Safari Edge | |
sliderthumb-horizontal |
div{ color: black;
-webkit-appearance: slider-thumb-horizontal; }
<div>Lorem</div> |
Chrome Safari Edge | |
sliderthumb-vertical |
div{ color: black;
-webkit-appearance: slider-thumb-vertical; }
<div>Lorem</div> |
Chrome Safari Edge | |
spinner |
div { color: transparent;
-moz-appearance: spinner;
-webkit-appearance: spinner; }
<div>Lorem</div> |
Firefox | Removed in Firefox 64. |
spinner-downbutton |
div { color: black;
-moz-appearance: spinner-downbutton;
-webkit-appearance: spinner-downbutton; }
<div>Lorem</div> |
Firefox | Removed in Firefox 64. |
spinner-textfield |
div { color: black;
-moz-appearance: spinner-textfield;
-webkit-appearance: spinner-textfield; }
<div>Lorem</div> |
Firefox | Removed in Firefox 64. |
spinner-upbutton |
div { color: black;
-moz-appearance: spinner-upbutton;
-webkit-appearance: spinner-upbutton; }
<div>Lorem</div> |
Firefox | Removed in Firefox 64. |
splitter |
div { color: transparent;
-moz-appearance: splitter;
-webkit-appearance: splitter; }
<div>Lorem</div> |
Firefox | Removed in Firefox 64. |
square-button |
div{ color: black;
-moz-appearance: square-button;
-webkit-appearance: square-button; }
<div>Lorem</div> |
Chrome Safari Edge | |
statusbar |
div { color: black;
-moz-appearance: statusbar;
-webkit-appearance: statusbar; }
<div>Lorem</div> |
Firefox | Removed in Firefox 64. |
statusbarpanel |
div { color: black;
-moz-appearance: statusbarpanel;
-webkit-appearance: statusbarpanel; }
<div>Lorem</div> |
Firefox | Removed in Firefox 64. |
tab |
div { color: black; height: 20px;
-moz-appearance: tab;
-webkit-appearance: tab; }
<div>Lorem</div> |
Firefox | Removed in Firefox 64 |
tabpanel |
div { color: black;
-moz-appearance: tabpanel;
-webkit-appearance: tabpanel; }
<div>Lorem</div> |
Firefox | Removed in Firefox 64. |
tabpanels |
div { color: black;
-moz-appearance: tabpanels;
-webkit-appearance: tabpanels; }
<div>Lorem</div> |
Firefox | Removed in Firefox 64 |
tab-scroll-arrow-back |
div { color: black;
-moz-appearance: tab-scroll-arrow-back;
-webkit-appearance: tab-scroll-arrow-back; }
<div>Lorem</div> |
Firefox | Removed in Firefox 64. |
tab-scroll-arrow-forward |
div { color: black;
-moz-appearance: tab-scroll-arrow-forward;
-webkit-appearance: tab-scroll-arrow-forward; }
<div>Lorem</div> |
Firefox | Removed in Firefox 64. |
textarea |
div{ color: black;
-webkit-appearance: textarea; }
<div>Lorem</div> |
Firefox Chrome Safari Edge | |
textfield |
div { color: black;
-moz-appearance: textfield;
-webkit-appearance: textfield; }
<div>Lorem</div> |
Firefox Chrome Safari Edge | |
textfield-multiline |
div { color: black;
-moz-appearance: textfield-multiline;
-webkit-appearance: textfield-multiline; }
<div>Lorem</div> |
Firefox | Use textarea instead |
toolbar |
div { color: black;
-moz-appearance: toolbar;
-webkit-appearance: toolbar; }
<div>Lorem</div> |
Firefox | Removed in Firefox 64. |
toolbarbutton |
div { color: black;
-moz-appearance: toolbarbutton;
-webkit-appearance: toolbarbutton; }
<div>Lorem</div> |
Firefox | Removed in Firefox 64. |
toolbarbutton-dropdown |
div { color: black;
-moz-appearance: toolbarbutton-dropdown;
-webkit-appearance: toolbarbutton-dropdown; }
<div>Lorem</div> |
Firefox | Removed in Firefox 64. |
toolbargripper |
div { color: black;
-moz-appearance: toolbargripper;
-webkit-appearance: toolbargripper; }
<div>Lorem</div> |
Firefox | Removed in Firefox 64. |
toolbox |
div { color: black;
-moz-appearance: toolbox;
-webkit-appearance: toolbox; }
<div>Lorem</div> |
Firefox | Removed in Firefox 64. |
tooltip |
div { color: black;
-moz-appearance: tooltip;
-webkit-appearance: tooltip; }
<div>Lorem</div> |
Firefox | Removed in Firefox 64. |
treeheader |
div { color: black;
-moz-appearance: treeheader;
-webkit-appearance: treeheader; }
<div>Lorem</div> |
Firefox | Removed in Firefox 64. |
treeheadercell |
div { color: black; height:20px;
-moz-appearance: treeheadercell;
-webkit-appearance: treeheadercell; }
<div>Lorem</div> |
Firefox | Removed in Firefox 64. |
treeheadersortarrow |
div { color: black;
-moz-appearance: treeheadersortarrow;
-webkit-appearance: treeheadersortarrow; }
<div>Lorem</div> |
Firefox | Removed in Firefox 64. |
treeitem |
div { color: black;
-moz-appearance: treeitem;
-webkit-appearance: treeitem; }
<div>Lorem</div> |
Firefox | Removed in Firefox 64. |
treeline |
div { color: black;
-moz-appearance: treeline;
-webkit-appearance: treeline; }
<div>Lorem</div> |
Firefox | Removed in Firefox 64. |
treetwisty |
div { color: transparent;
-moz-appearance: treetwisty;
-webkit-appearance: treetwisty; }
<div>Lorem</div> |
Firefox | Removed in Firefox 64. |
treetwistyopen |
div { color: transparent;
-moz-appearance: treetwistyopen;
-webkit-appearance: treetwistyopen; }
<div>Lorem</div> |
Firefox | Removed in Firefox 64. |
treeview |
div { color: black;
-moz-appearance: treeview;
-webkit-appearance: treeview; }
<div>Lorem</div> |
Firefox | Removed in Firefox 64. |
relevancy-level-indicator |
div{ color: black;
-moz-appearance: relevancy-level-indicator;
-webkit-appearance: relevancy-level-indicator; }
<div>Lorem</div> |
Safari | |
-moz-win-borderless-glass |
div { color: black;
-moz-appearance: -moz-win-borderless-glass; }
<div>Lorem</div> |
Firefox | Removed in Firefox 64. This style applies the Aero Glass effect -- but without a border -- to the element. |
-moz-win-browsertabbar-toolbox |
div { color: black;
-moz-appearance: -moz-win-browsertabbar-toolbox; }
<div>Lorem</div> |
Firefox | Removed in Firefox 64. This toolbox style is meant to be used for the tab bar in a browser. |
-moz-win-communicationstext |
div { color: black;
-moz-appearance: -moz-win-communicationstext; }
<div>Lorem</div> |
Firefox | Removed in Firefox 64. |
-moz-win-communications-toolbox |
div { color: black;
-moz-appearance: -moz-win-communications-toolbox; }
<div>Lorem</div> |
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 |
div { color: black;
-moz-appearance: -moz-win-exclude-glass; }
<div>Lorem</div> |
Firefox | Removed in Firefox 64. This styles is used to exclude the Aero Glass effect on the element. |
-moz-win-glass |
div { color: black;
-moz-appearance: -moz-win-glass; }
<div>Lorem</div> |
Firefox | Removed in Firefox 64. This style applies the Aero Glass effect to the element. |
-moz-win-media-toolbox |
div { color: black;
-moz-appearance: -moz-win-media-toolbox; }
<div>Lorem</div> |
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 |
div { color: black;
-moz-appearance: -moz-window-button-box; }
<div>Lorem</div> |
Firefox | Removed in Firefox 64. |
-moz-window-button-box-maximized |
div { color: black;
-moz-appearance: -moz-window-button-box-maximized; }
<div>Lorem</div> |
Firefox | Removed in Firefox 64. |
-moz-window-button-close |
div { color: black;
-moz-appearance: -moz-window-button-close; }
<div>Lorem</div> |
Firefox | Removed in Firefox 64. |
-moz-window-button-maximize |
div { color: black;
-moz-appearance: -moz-window-button-maximize; }
<div>Lorem</div> |
Firefox | Removed in Firefox 64. |
-moz-window-button-minimize |
div { color: black;
-moz-appearance: -moz-window-button-minimize; }
<div>Lorem</div> |
Firefox | Removed in Firefox 64. |
-moz-window-button-restore |
div { color: black;
-moz-appearance: -moz-window-button-restore; }
<div>Lorem</div> |
Firefox | Removed in Firefox 64. |
-moz-window-frame-bottom |
div { color: black;
-moz-appearance: -moz-window-frame-bottom; }
<div>Lorem</div> |
Firefox | Removed in Firefox 64. |
-moz-window-frame-left |
div { color: black;
-moz-appearance: -moz-window-frame-left; }
<div>Lorem</div> |
Firefox | Removed in Firefox 64. |
-moz-window-frame-right |
div { color: black;
-moz-appearance: -moz-window-frame-right; }
<div>Lorem</div> |
Firefox | Removed in Firefox 64. |
-moz-window-titlebar |
div { color: black;
-moz-appearance: -moz-window-titlebar; }
<div>Lorem</div> |
Firefox | Removed in Firefox 64. |
-moz-window-titlebar-maximized |
div { color: black;
-moz-appearance: -moz-window-titlebar-maximized; }
<div>Lorem</div> |
Firefox | Removed in Firefox 64. |
-apple-pay-button |
div{ color: black;
-webkit-appearance: -apple-pay-button; }
<div>Lorem</div> |
Safari | iOS and macOS only. Available on the web starting in iOS 10.1 and macOS 10.12.1 |
Формальный синтаксис
none | auto | button | textfield | menulist-button | <compat-auto>где
<compat-auto> = searchfield | textarea | push-button | slider-horizontal | checkbox | radio | square-button | menulist | listbox | meter | progress-bar
Примеры
Нижеприведенный пример показывает, как сделать элемент, выглядящий как кнопка панели инструментов в Firefox:
.exampleone {
-moz-appearance: toolbarbutton;
}
Смотрите также this JSFiddle в качестве примера, показывающего как вы можете использвать appearance: none для стилизации радио кнопок и чекбоксов.
Спецификации
| Спецификация | Статус | Комментарии |
|---|---|---|
| CSS Basic User Interface Module Level 4 Определение 'appearance' в этой спецификации. |
Рабочий черновик | Первое определение. |
| Начальное значение | auto |
|---|---|
| Применяется к | все элементы |
| Наследуется | нет |
| Обработка значения | как указано |
| Animation type | discrete |
Поддержка браузерами
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Update compatibility data on GitHub
| Компьютеры | Мобильные | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
appearance | Chrome
Частичная поддержка
1
| Edge
Частичная поддержка
12
| Firefox
Частичная поддержка
1
| IE Нет поддержки Нет | Opera
Частичная поддержка
15
| Safari
Частичная поддержка
3
| WebView Android
Частичная поддержка
1
| Chrome Android
Частичная поддержка
18
| Firefox Android
Частичная поддержка
4
| Opera Android
Частичная поддержка
14
| Safari iOS
Частичная поддержка
1
| Samsung Internet Android
Частичная поддержка
1.0
|
auto | Chrome Нет поддержки Нет | Edge Нет поддержки Нет | Firefox Нет поддержки Нет | IE Нет поддержки Нет | Opera Нет поддержки Нет | Safari Нет поддержки Нет | WebView Android Нет поддержки Нет | Chrome Android Нет поддержки Нет | Firefox Android Нет поддержки Нет | Opera Android Нет поддержки Нет | Safari iOS Нет поддержки Нет | Samsung Internet Android Нет поддержки Нет |
button | Chrome Полная поддержка 1 | Edge Полная поддержка 12 | Firefox Полная поддержка 1 | IE Нет поддержки Нет | Opera Полная поддержка 15 | Safari Полная поддержка 3 | WebView Android Полная поддержка 1 | Chrome Android Полная поддержка 18 | Firefox Android Полная поддержка 4 | Opera Android Полная поддержка 14 | Safari iOS Полная поддержка 1 | Samsung Internet Android Полная поддержка 1.0 |
<compat-auto> (compatibility values searchfield, textarea, push-button, slider-horizontal, checkbox, radio, square-button, menulist, listbox, meter, progress-bar) | Chrome Полная поддержка 1 | Edge Частичная поддержка 12 | Firefox Частичная поддержка 1 | IE Нет поддержки Нет | Opera Полная поддержка 15 | Safari Полная поддержка 3 | WebView Android Полная поддержка ≤37 | Chrome Android Полная поддержка 18 | Firefox Android Частичная поддержка 4 | Opera Android Полная поддержка 14 | Safari iOS Полная поддержка 1 | Samsung Internet Android Полная поддержка 1.0 |
menulist-button | Chrome Полная поддержка 1 | Edge Частичная поддержка 12 | Firefox
Частичная поддержка
1
| IE Нет поддержки Нет | Opera Полная поддержка 15 | Safari Полная поддержка 3 | WebView Android Полная поддержка ≤37 | Chrome Android Полная поддержка 18 | Firefox Android Частичная поддержка 4 | Opera Android Полная поддержка 14 | Safari iOS Полная поддержка 1 | Samsung Internet Android Полная поддержка 1.0 |
none | Chrome Полная поддержка 1 | Edge Полная поддержка 12 | Firefox
Полная поддержка
54
| IE Нет поддержки Нет | Opera Полная поддержка 15 | Safari Полная поддержка 3 | WebView Android Полная поддержка 1 | Chrome Android Полная поддержка 18 | Firefox Android
Частичная поддержка
4
| Opera Android Полная поддержка 14 | Safari iOS Полная поддержка 3 | Samsung Internet Android Полная поддержка 1.0 |
textfield | Chrome Полная поддержка 1 | Edge Полная поддержка 12 | Firefox Полная поддержка 1 | IE Нет поддержки Нет | Opera Полная поддержка 15 | Safari Полная поддержка 3 | WebView Android Полная поддержка 1 | Chrome Android Полная поддержка 18 | Firefox Android Полная поддержка 4 | Opera Android Полная поддержка 14 | Safari iOS Полная поддержка 1 | Samsung Internet Android Полная поддержка 1.0 |
Легенда
- Полная поддержка
- Полная поддержка
- Частичная поддержка
- Частичная поддержка
- Нет поддержки
- Нет поддержки
- Экспериментальная. Ожидаемое поведение может измениться в будущем.
- Экспериментальная. Ожидаемое поведение может измениться в будущем.
- Смотрите замечания реализации.
- Смотрите замечания реализации.
- Пользователь должен сам включить эту возможность.
- Пользователь должен сам включить эту возможность.
- Требует вендорный префикс или другое имя для использования.
- Требует вендорный префикс или другое имя для использования.
Смотрите также
- Definition of
appearancein CSS 3 Basic User Interface (Candidate Recommendation from 2004-05-11). - Dropped CSS3 features from the UI spec.4