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`	div{ color: black; -moz-appearance:none; -webkit-appearance:none; appearance:none; } <div>Lorem</div> {{EmbedLiveSample("sampleNone",100,50,"","", "nobutton")}}	Firefox Chrome Safari Edge	No special styling is applied. This is the default.
`auto` {{Experimental_Inline}}	div{ color: black; -moz-appearance: auto; -webkit-appearance: auto; appearance:auto; } <div>Lorem</div> {{EmbedLiveSample("sampleAuto",100,50,"","", "nobutton")}}	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_Inline}}	div{ color: black; -moz-appearance: attachment; -webkit-appearance: attachment; } <div>Lorem</div> {{EmbedLiveSample("sampleAttachment",100,50,"","", "nobutton")}}	Safari
`borderless-attachment` {{Non-standard_Inline}}	div{ color: black; -moz-appearance: borderless-attachment; -webkit-appearance: borderless-attachment; } <div>Lorem</div> {{EmbedLiveSample("sample-borderless-attachment",100,50,"","","nobutton")}}	Safari
`button` {{Non-standard_Inline}}	div { color: black; -moz-appearance: button; -webkit-appearance: button; } <div>Lorem</div> {{EmbedLiveSample("sampleButton",100,50,"","", "nobutton")}}	Firefox Chrome Safari Edge	The element is drawn like a button.
`button-arrow-down` {{Non-standard_Inline}}	div { color: black; -moz-appearance: button-arrow-down; -webkit-appearance: button-arrow-down; } <div>Lorem</div> {{EmbedLiveSample("sampleButtonArrowDown",100,50,"","", "nobutton")}}	Firefox	Removed in FF 64
`button-arrow-next` {{Non-standard_Inline}}	div { color: black; -moz-appearance: button-arrow-next; -webkit-appearance: button-arrow-next; } <div>Lorem</div> {{EmbedLiveSample("sampleButtonArrowNext",100,50,"","", "nobutton")}}	Firefox	Removed in FF 64
`button-arrow-previous` {{Non-standard_Inline}}	div { color: black; -moz-appearance: button-arrow-previous; -webkit-appearance: button-arrow-previous; } <div>Lorem</div> {{EmbedLiveSample("sampleButtonArrowPrevious",100,50,"","", "nobutton")}}	Firefox	Removed in FF 64
`button-arrow-up` {{Non-standard_Inline}}	div { color: black; -moz-appearance: button-arrow-up; -webkit-appearance: button-arrow-up; } <div>Lorem</div> {{EmbedLiveSample("sampleButtonArrowUp",100,50,"","", "nobutton")}}	Firefox	Removed in FF 64
`button-bevel` {{Non-standard_Inline}}	div { color: black; -moz-appearance: button-bevel; -webkit-appearance: button-bevel; } <div>Lorem</div> {{EmbedLiveSample("sampleButtonBevel",100,50,"","", "nobutton")}}	Firefox Chrome Safari Edge
`button-focus` {{Non-standard_Inline}}	div { color: black; -moz-appearance: button-focus; -webkit-appearance: button-focus; } <div>Lorem</div> {{EmbedLiveSample("sampleButtonFocus",100,50,"","", "nobutton")}}	Firefox	Removed in FF 64
`caps-lock-indicator` {{Non-standard_Inline}}	div{ color: black; -moz-appearance: caps-lock-indicator; -webkit-appearance: caps-lock-indicator; } <div>Lorem</div> {{EmbedLiveSample("sample-caps-lock-indicator",100,50,"","","nobutton")}}	Safari Edge
`caret` {{Non-standard_Inline}}	div { color: black; -moz-appearance: caret; -webkit-appearance: caret; } <div>Lorem</div> {{EmbedLiveSample("sampleCaret",100,50,"","", "nobutton")}}	Firefox Chrome Safari Edge
`checkbox` {{Non-standard_Inline}}	div { color: black; -moz-appearance: checkbox; -webkit-appearance: checkbox; } <div>Lorem</div> {{EmbedLiveSample("sampleCheckbox",100,50,"","", "nobutton")}}	Firefox Chrome Safari Edge	The element is drawn like a checkbox, including only the actual "checkbox" portion.
`checkbox-container` {{Non-standard_Inline}}	div { color: black; -moz-appearance: checkbox-container; -webkit-appearance: checkbox-container; } <div>Lorem</div> {{EmbedLiveSample("sampleCheckboxContainer",100,50,"","", "nobutton")}}	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_Inline}}	div { color: black; -moz-appearance: checkbox-label; -webkit-appearance: checkbox-label; } <div>Lorem</div> {{EmbedLiveSample("sampleCheckboxLabel",100,50,"","", "nobutton")}}	Firefox
`checkmenuitem` {{Non-standard_Inline}}	div { color: black; height: 20px; -moz-appearance: checkmenuitem; -webkit-appearance: checkmenuitem; } <div>Lorem</div> {{EmbedLiveSample("sampleCheckmenuitem",100,50,"","", "nobutton")}}	Firefox
`color-well` {{Non-standard_Inline}}	div{ color: black; -moz-appearance: color-well; -webkit-appearance: color-well; } <div>Lorem</div> {{EmbedLiveSample("sample-color-well",100,50,"","","nobutton")}}	Safari	`input type=color`
`continuous-capacity-level-indicator` {{Non-standard_Inline}}	div{ color: black; -moz-appearance: continuous-capacity-level-indicator; -webkit-appearance: continuous-capacity-level-indicator; } <div>Lorem</div> {{EmbedLiveSample("sample-continuous-capacity-level-indicator",100,50,"","","nobutton")}}	Safari
`default-button` {{Non-standard_Inline}}	div{ color: black; -moz-appearance: default-button; -webkit-appearance: default-button; } <div>Lorem</div> {{EmbedLiveSample("sample-default-button",100,50,"","","nobutton")}}	Safari Edge
`discrete-capacity-level-indicator` {{Non-standard_Inline}}	div{ color: black; -moz-appearance: discrete-capacity-level-indicator; -webkit-appearance: discrete-capacity-level-indicator; } <div>Lorem</div> {{EmbedLiveSample("sample-discrete-capacity-level-indicator",100,50,"","","nobutton")}}	Safari
`dualbutton` {{Non-standard_Inline}}	div { color: black; -moz-appearance: dualbutton; -webkit-appearance: dualbutton; } <div>Lorem</div> {{EmbedLiveSample("sampleDualButton",100,50,"","", "nobutton")}}	Firefox	Removed in FF 64
`groupbox` {{Non-standard_Inline}}	div { color: black; -moz-appearance: groupbox; -webkit-appearance: groupbox; } <div>Lorem</div> {{EmbedLiveSample("sampleGroupbox",100,50,"","", "nobutton")}}	Firefox	Removed in FF 64
`inner-spin-button` {{Non-standard_Inline}}	div{ color: black; -webkit-appearance: inner-spin-button; } <div>Lorem</div> {{EmbedLiveSample("sampleInnerSpinButton",100,50,"","", "nobutton")}}	Firefox Chrome Safari
`image-controls-button` {{Non-standard_Inline}}	div{ color: black; -moz-appearance: image-controls-button; -webkit-appearance: image-controls-button; } <div>Lorem</div> {{EmbedLiveSample("sample-image-controls-button",100,50,"","","nobutton")}}	Safari
`list-button` {{Non-standard_Inline}}	div{ color: black; -moz-appearance: list-button; -webkit-appearance: list-button; } <div>Lorem</div> {{EmbedLiveSample("sample-list-button",100,50,"","","nobutton")}}	Safari	datalist
`listbox` {{Non-standard_Inline}}	div { color: black; height:20px; -moz-appearance: listbox; -webkit-appearance: listbox; } <div>Lorem</div> {{EmbedLiveSample("sampleListBox",100,50,"","", "nobutton")}}	Firefox Chrome Safari Edge
`listitem` {{Non-standard_Inline}}	div { color: black; -moz-appearance: listitem; -webkit-appearance: listitem; } <div>Lorem</div> {{EmbedLiveSample("sampleListItem",100,50,"","", "nobutton")}}	Firefox Chrome Safari Edge
`media-enter-fullscreen-button` {{Non-standard_Inline}}	div{ color: black; -webkit-appearance: media-enter-fullscreen-button; } <div>Lorem</div> {{EmbedLiveSample("sampleMediaEnterFullscreenButton",100,50,"","", "nobutton")}}	Chrome Safari
`media-exit-fullscreen-button` {{Non-standard_Inline}}	div{ color: black; -webkit-appearance: media-exit-fullscreen-button; } <div>Lorem</div> {{EmbedLiveSample("sampleMediaExitFullscreenButton",100,50,"","", "nobutton")}}	Chrome Safari
`media-fullscreen-volume-slider` {{Non-standard_Inline}}	div{ color: black; -moz-appearance: media-fullscreen-volume-slider; -webkit-appearance: media-fullscreen-volume-slider; } <div>Lorem</div> {{EmbedLiveSample("sample-media-fullscreen-volume-slider",100,50,"","","nobutton")}}	Safari
`media-fullscreen-volume-slider-thumb` {{Non-standard_Inline}}	div{ color: black; -moz-appearance: media-fullscreen-volume-slider-thumb; -webkit-appearance: media-fullscreen-volume-slider-thumb; } <div>Lorem</div> {{EmbedLiveSample("sample-media-fullscreen-volume-slider-thumb",100,50,"","","nobutton")}}	Safari
`media-mute-button` {{Non-standard_Inline}}	div{ color: black; -webkit-appearance: media-mute-button; } <div>Lorem</div> {{EmbedLiveSample("sampleMediaMuteButton",100,50,"","", "nobutton")}}	Chrome Safari Edge
`media-play-button` {{Non-standard_Inline}}	div{ color: black; -webkit-appearance: media-play-button; } <div>Lorem</div> {{EmbedLiveSample("sampleMediaPlayButton",100,50,"","", "nobutton")}}	Chrome Safari Edge
`media-overlay-play-button` {{Non-standard_Inline}}	div{ color: black; -webkit-appearance: media-overlay-play-button; } <div>Lorem</div> {{EmbedLiveSample("sampleMediaOverlayPlayButton",100,50,"","", "nobutton")}}	Chrome Safari
`media-return-to-realtime-button` {{Non-standard_Inline}}	div{ color: black; -moz-appearance: media-return-to-realtime-button; -webkit-appearance: media-return-to-realtime-button; } <div>Lorem</div> {{EmbedLiveSample("sample-media-return-to-realtime-button",100,50,"","","nobutton")}}	Safari
`media-rewind-button` {{Non-standard_Inline}}	div{ color: black; -moz-appearance: media-rewind-button; -webkit-appearance: media-rewind-button; } <div>Lorem</div> {{EmbedLiveSample("sample-media-rewind-button",100,50,"","","nobutton")}}	Safari
`media-seek-back-button` {{Non-standard_Inline}}	div{ color: black; -moz-appearance: media-seek-back-button; -webkit-appearance: media-seek-back-button; } <div>Lorem</div> {{EmbedLiveSample("sample-media-seek-back-button",100,50,"","","nobutton")}}	Safari Edge
`media-seek-forward-button` {{Non-standard_Inline}}	div{ color: black; -moz-appearance: media-seek-forward-button; -webkit-appearance: media-seek-forward-button; } <div>Lorem</div> {{EmbedLiveSample("sample-media-seek-forward-button",100,50,"","","nobutton")}}	Safari Edge
`media-toggle-closed-captions-button` {{Non-standard_Inline}}	div{ color: black; -webkit-appearance: media-toggle-closed-captions-button; } <div>Lorem</div> {{EmbedLiveSample("sampleMediaToggleClosedCaptionsButton",100,50,"","", "nobutton")}}	Chrome Safari
`media-slider` {{Non-standard_Inline}}	div{ color: black; -webkit-appearance: media-slider; } <div>Lorem</div> {{EmbedLiveSample("sampleMediaSlider",100,50,"","", "nobutton")}}	Chrome Safari Edge
`media-sliderthumb` {{Non-standard_Inline}}	div{ color: black; -webkit-appearance: media-sliderthumb; } <div>Lorem</div> {{EmbedLiveSample("sampleMediaSliderThumb",100,50,"","", "nobutton")}}	Chrome Safari Edge
`media-volume-slider-container` {{Non-standard_Inline}}	div{ color: black; -webkit-appearance: media-volume-slider-container; } <div>Lorem</div> {{EmbedLiveSample("sampleMediaVolumeSliderContainer",100,50,"","", "nobutton")}}	Chrome Safari
`media-volume-slider-mute-button` {{Non-standard_Inline}}	div{ color: black; -moz-appearance: media-volume-slider-mute-button; -webkit-appearance: media-volume-slider-mute-button; } <div>Lorem</div> {{EmbedLiveSample("sample-media-volume-slider-mute-button",100,50,"","","nobutton")}}	Safari
`media-volume-slider` {{Non-standard_Inline}}	div{ color: black; -webkit-appearance: media-volume-slider; } <div>Lorem</div> {{EmbedLiveSample("sampleMediaVolumeSlider",100,50,"","", "nobutton")}}	Chrome Safari
`media-volume-sliderthumb` {{Non-standard_Inline}}	div{ color: black; -webkit-appearance: media-volume-slider-thumb; } <div>Lorem</div> {{EmbedLiveSample("sampleMediaVolumeSliderThumb",100,50,"","", "nobutton")}}	Chrome Safari
`media-controls-background` {{Non-standard_Inline}}	div{ color: black; -webkit-appearance: media-controls-background; } <div>Lorem</div> {{EmbedLiveSample("sampleMediaControlsBackground",100,50,"","", "nobutton")}}	Chrome Safari
`media-controls-dark-bar-background` {{Non-standard_Inline}}	div{ color: black; -moz-appearance: media-controls-dark-bar-background; -webkit-appearance: media-controls-dark-bar-background; } <div>Lorem</div> {{EmbedLiveSample("sample-media-controls-dark-bar-background",100,50,"","","nobutton")}}	Safari
`media-controls-fullscreen-background` {{Non-standard_Inline}}	div{ color: black; -webkit-appearance: media-controls-fullscreen-background; } <div>Lorem</div> {{EmbedLiveSample("sampleMediaControlsFullscreenBackground",100,50,"","", "nobutton")}}	Chrome Safari
`media-controls-light-bar-background` {{Non-standard_Inline}}	div{ color: black; -moz-appearance: media-controls-light-bar-background; -webkit-appearance: media-controls-light-bar-background; } <div>Lorem</div> {{EmbedLiveSample("sample-media-controls-light-bar-background",100,50,"","","nobutton")}}	Safari
`media-current-time-display` {{Non-standard_Inline}}	div{ color: black; -webkit-appearance: media-current-time-display; } <div>Lorem</div> {{EmbedLiveSample("sampleMediaCurrentTimeDisplay",100,50,"","", "nobutton")}}	Chrome Safari
`media-time-remaining-display` {{Non-standard_Inline}}	div{ color: black; -webkit-appearance: media-time-remaining-display; } <div>Lorem</div> {{EmbedLiveSample("sampleMediaTimeRemainingDisplay",100,50,"","", "nobutton")}}	Chrome Safari
`menuarrow` {{Non-standard_Inline}}	div { color: black; -moz-appearance: menuarrow; -webkit-appearance: menuarrow; } <div>Lorem</div> {{EmbedLiveSample("sampleMenuArrow",100,50,"","", "nobutton")}}	Firefox	Removed in Firefox 64
`menubar` {{Non-standard_Inline}}	div { color: balck; -moz-appearance: menubar; -webkit-appearance: menubar; } <div>Lorem</div> {{EmbedLiveSample("sampleMenubar",100,50,"","", "nobutton")}}	Firefox	Removed in Firefox 64
`menucheckbox` {{Non-standard_Inline}}	div { color: black; -moz-appearance: menucheckbox; -webkit-appearance: menucheckbox; } <div>Lorem</div> {{EmbedLiveSample("sampleMenuCheckbox",100,50,"","", "nobutton")}}	Firefox	Removed in Firefox 64
`menuimage` {{Non-standard_Inline}}	div { color: black; -moz-appearance: menuimage; -webkit-appearance: menuimage; } <div>Lorem</div> {{EmbedLiveSample("sampleMenuImage",100,50,"","", "nobutton")}}	Firefox	Removed in Firefox 64
`menuitem` {{Non-standard_Inline}}	div { color: black; -moz-appearance: menuitem; -webkit-appearance: menuitem; } <div>Lorem</div> {{EmbedLiveSample("sampleMenuItem",100,50,"","", "nobutton")}}	Firefox	Removed in Firefox 64, the element was styled as menu item, item is highlighted when hovered.
`menuitemtext` {{Non-standard_Inline}}	div { color: black; -moz-appearance: menuitemtext; -webkit-appearance: menuitemtext; } <div>Lorem</div> {{EmbedLiveSample("sampleMenuItemText",100,50,"","", "nobutton")}}	Firefox	Removed in FF 64
`menulist` {{Non-standard_Inline}}	div { color: black; -moz-appearance: menulist; -webkit-appearance: menulist; } <div>Lorem</div> {{EmbedLiveSample("sampleMenuList",100,50,"","", "nobutton")}}	Firefox Chrome Safari Edge
`menulist-button` {{Non-standard_Inline}}	div { color: black; -moz-appearance: menulist-button; -webkit-appearance: menulist-button; } <div>Lorem</div> {{EmbedLiveSample("sampleMenuListButton",100,50,"","", "nobutton")}}	Firefox Chrome Safari Edge	The element is styled as a button that would indicate a menulist can be opened.
`menulist-text` {{Non-standard_Inline}}	div { color: black; -moz-appearance: menulist-text; -webkit-appearance: menulist-text; } <div>Lorem</div> {{EmbedLiveSample("sampleMenuListText",100,50,"","", "nobutton")}}	Firefox Chrome Safari Edge
`menulist-textfield` {{Non-standard_Inline}}	div { color: black; -moz-appearance: menulist-textfield; -webkit-appearance: menulist-textfield; } <div>Lorem</div> {{EmbedLiveSample("sampleMenuListTextfield",100,50,"","", "nobutton")}}	Firefox Chrome Safari Edge	The element is styled as the text field for a menulist. (Not implemented for the Windows platform)
`menupopup` {{Non-standard_Inline}}	div { color: black; -moz-appearance: menupopup; -webkit-appearance: menupopup; } <div>Lorem</div> {{EmbedLiveSample("sampleMenuPopup",100,50,"","", "nobutton")}}	Firefox	Removed in Firefox 64
`menuradio` {{Non-standard_Inline}}	div { color: black; -moz-appearance: menuradio; -webkit-appearance: menuradio; } <div>Lorem</div> {{EmbedLiveSample("sampleMenuRadio",100,50,"","", "nobutton")}}	Firefox	Removed in Firefox 64
`menuseparator` {{Non-standard_Inline}}	div { color: transparent; -moz-appearance: menuseparator; -webkit-appearance: menuseparator; } <div>Lorem</div> {{EmbedLiveSample("sampleMenuSeparator",100,50,"","", "nobutton")}}	Firefox	Removed in Firefox 64
`meter`	div{ color: black; -webkit-appearance: meter; } <div>Lorem</div> {{EmbedLiveSample("sampleMeter",100,50,"","", "nobutton")}}	Chrome Safari Firefox	New in Fx 64
`meterbar` {{Non-standard_Inline}}	div { color: black; -moz-appearance: meterbar; -webkit-appearance: meterbar; } <div>Lorem</div> {{EmbedLiveSample("sampleMeterbar",100,50,"","", "nobutton")}}	Firefox	New in Fx 16. Use `meter` instead
`meterchunk` {{Non-standard_Inline}}	div { color: black; -moz-appearance: meterchunk; -webkit-appearance: meterchunk; } <div>Lorem</div> {{EmbedLiveSample("sampleMeterchunk",100,50,"","", "nobutton")}}	Firefox	New in Fx 16. Removed in Firefox 64.
`number-input` {{Non-standard_Inline}}	div { color: black; -moz-appearance: number-input; -webkit-appearance: number-input; } <div>Lorem</div> {{EmbedLiveSample("sampleNumberInput",100,50,"","", "nobutton")}}	Firefox
`progress-bar`	div{ color: black; -webkit-appearance: progress-bar; } <div>Lorem</div> {{EmbedLiveSample("sampleProgressBarWebkit",100,50,"","", "nobutton")}}	Chrome Safari Firefox	New in Fx 64
`progress-bar-value` {{Non-standard_Inline}}	div{ color: black; -webkit-appearance: progress-bar-value; } <div>Lorem</div> {{EmbedLiveSample("sampleProgressBarValueWebkit",100,50,"","", "nobutton")}}	Chrome Safari
`progressbar` {{Non-standard_Inline}}	div { color: black; -moz-appearance: progressbar; -webkit-appearance: progressbar; } <div>Lorem</div> {{EmbedLiveSample("sampleProgressBar",100,50,"","", "nobutton")}}	Firefox	The element is styled like a progress bar. Use `progress-bar` instead
`progressbar-vertical` {{Non-standard_Inline}}	div { color: transparent; -moz-appearance: progressbar-vertical; -webkit-appearance: preogressbar-vertical; } <div>Lorem</div> {{EmbedLiveSample("sampleProgressBarVertical",100,50,"","", "nobutton")}}	Firefox
`progresschunk` {{Non-standard_Inline}}	div { color: black; -moz-appearance: progresschunk; -webkit-appearance: progresschunk; } <div>Lorem</div> {{EmbedLiveSample("sampleProgressChunk",100,50,"","", "nobutton")}}	Firefox	Removed in Firefox 64.
`progresschunk-vertical` {{Non-standard_Inline}}	div { color: black; -moz-appearance: progresschunk-vertical; -webkit-appearance: progresschunk-vertical; } <div>Lorem</div> {{EmbedLiveSample("sampleProgressChunkVertical",100,50,"","", "nobutton")}}	Firefox	Removed in Firefox 64.
`push-button` {{Non-standard_Inline}}	div{ color: black; -webkit-appearance: push-button; } <div>Lorem</div> {{EmbedLiveSample("samplePushButton",100,50,"","", "nobutton")}}	Chrome Safari Edge
`radio` {{Non-standard_Inline}}	div { color: black; -moz-appearance: radio; -webkit-appearance: radio; } <div>Lorem</div> {{EmbedLiveSample("sampleRadio",100,50,"","", "nobutton")}}	Firefox Chrome Safari Edge	The element is drawn like a radio button, including only the actual "radio button" portion.
`radio-container` {{Non-standard_Inline}}	div { color: black; -moz-appearance: radio-container; -webkit-appearance: radio-container; } <div>Lorem</div> {{EmbedLiveSample("sampleRadioContainer",100,50,"","", "nobutton")}}	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_Inline}}	div { color: black; -moz-appearance: radio-label; -webkit-appearance: radio-label; } <div>Lorem</div> {{EmbedLiveSample("sampleRadioLabel",100,50,"","", "nobutton")}}	Firefox	Removed in Firefox 64.
`radiomenuitem` {{Non-standard_Inline}}	div { color: black; -moz-appearance: radiomenuitem; -webkit-appearance: radiomenuitem; } <div>Lorem</div> {{EmbedLiveSample("sampleRadioMenuItem",100,50,"","", "nobutton")}}	Firefox	Removed in Firefox 64.
`range` {{Non-standard_Inline}}	div { color: black; -moz-appearance: range; -webkit-appearance: range; } range <div>Lorem</div> {{EmbedLiveSample("sampleRange",100,50,"","", "nobutton")}}	Firefox
`range-thumb` {{Non-standard_Inline}}	div { color: black; -moz-appearance: range-thumb; -webkit-appearance: range-thumb; } <div>Lorem</div> {{EmbedLiveSample("sampleRangeThumb",100,50,"","", "nobutton")}}	Firefox
`rating-level-indicator` {{Non-standard_Inline}}	div{ color: black; -moz-appearance: rating-level-indicator; -webkit-appearance: rating-level-indicator; } <div>Lorem</div> {{EmbedLiveSample("sample-rating-level-indicator",100,50,"","","nobutton")}}	Safari
`resizer` {{Non-standard_Inline}}	div { color: transparent; -moz-appearance: resizer; -webkit-appearance: resizer; } <div>Lorem</div> {{EmbedLiveSample("sampleResizer",100,50,"","", "nobutton")}}	Firefox	Removed in Firefox 63
`resizerpanel` {{Non-standard_Inline}}	div { color: black; -moz-appearance: resizerpanel; -webkit-appearance: resizerpanel; } <div>Lorem</div> {{EmbedLiveSample("sampleResizerPanel",100,50,"","", "nobutton")}}	Firefox	Removed in Firefox 63.
`scale-horizontal` {{Non-standard_Inline}}	div { color: transparent; -moz-appearance: scale-horizontal; -webkit-appearance: scale-horizontal; } <div>Lorem</div> {{EmbedLiveSample("sampleScaleHorizontal",100,50,"","", "nobutton")}}	Firefox
`scalethumbend` {{Non-standard_Inline}}	div { color: black; -moz-appearance: scalethumbend; -webkit-appearance: scalethumbend; } <div>Lorem</div> {{EmbedLiveSample("sampleThumbEnd",100,50,"","", "nobutton")}}	Firefox
`scalethumb-horizontal` {{Non-standard_Inline}}	div { color: transparent; -moz-appearance: scalethumb-horizontal; -webkit-appearance: scalethumb-horizontal; } <div>Lorem</div> {{EmbedLiveSample("sampleScaleThumbHorizontal",100,50,"","", "nobutton")}}	Firefox
`scalethumbstart` {{Non-standard_Inline}}	div { color: black; -moz-appearance: scalethumbstart; -webkit-appearance: scalethumbstart; } <div>Lorem</div> {{EmbedLiveSample("sampleScaleThumbStart",100,50,"","", "nobutton")}}	Firefox
`scalethumbtick` {{Non-standard_Inline}}	div { color: black; -moz-appearance: scalethumbtick; -webkit-appearance: scalethumbtick; } <div>Lorem</div> {{EmbedLiveSample("sampleScaleThumbTick",100,50,"","", "nobutton")}}	Firefox
`scalethumb-vertical` {{Non-standard_Inline}}	div { color: black; -moz-appearance: scalethumb-vertical; -webkit-appearance: scalethumb-vertical; } <div>Lorem</div> {{EmbedLiveSample("sampleScaleThumbVertical",100,50,"","", "nobutton")}}	Firefox
`scale-vertical` {{Non-standard_Inline}}	div { color: transparent; -moz-appearance: scale-vertical; -webkit-appearance: scale-vertical; } <div>Lorem</div> {{EmbedLiveSample("sampleScaleVertical",100,50,"","", "nobutton")}}	Firefox
`scrollbarbutton-down` {{Non-standard_Inline}}	div { color: black; -moz-appearance: scrollbarbutton-down; -webkit-appearance: scrollbarbutton-down; } <div>Lorem</div> {{EmbedLiveSample("sampleScrollbarButtonDown",100,50,"","", "nobutton")}}	Firefox	Removed in Firefox 63.
`scrollbarbutton-left` {{Non-standard_Inline}}	div { color: black; -moz-appearance: scrollbarbutton-left; -webkit-appearance: scrollbarbutton-left; } <div>Lorem</div> {{EmbedLiveSample("sampleScrollbarButtonLeft",100,50,"","", "nobutton")}}	Firefox	Removed in Firefox 63.
`scrollbarbutton-right` {{Non-standard_Inline}}	div { color: black; -moz-appearance: scrollbarbutton-right; -webkit-appearance: scrollbarbutton-right; } <div>Lorem</div> {{EmbedLiveSample("sampleScrollbarButtonRight",100,50,"","", "nobutton")}}	Firefox	Removed in Firefox 63.
`scrollbarbutton-up` {{Non-standard_Inline}}	div { color: black; -moz-appearance: scrollbarbutton-up; -webkit-appearance: scrollbarbutton-up; } <div>Lorem</div> {{EmbedLiveSample("sampleScrollbarButtonUp",100,50,"","", "nobutton")}}	Firefox	Removed in Firefox 63.
`scrollbarthumb-horizontal` {{Non-standard_Inline}}	div { color: black; -moz-appearance: scrollbarthumb-horizontal; -webkit-appearance: scrollbarthumb-horizontal; } <div>Lorem</div> {{EmbedLiveSample("sampleScrollbarThumbHorizontal",100,50,"","", "nobutton")}}	Firefox
`scrollbarthumb-vertical` {{Non-standard_Inline}}	div { color: black; -moz-appearance: scrollbarthumb-vertical; -webkit-appearance: scrollbarthumb-vertical; } <div>Lorem</div> {{EmbedLiveSample("sampleScrollbarThumbVertical",100,50,"","", "nobutton")}}	Firefox
`scrollbartrack-horizontal` {{Non-standard_Inline}}	div { color: black; -moz-appearance: scrollbartrack-horizontal; -webkit-appearance: scrollbartrack-horizontal; } <div>Lorem</div> {{EmbedLiveSample("sampleScrollbarTrackHorizontal",100,50,"","", "nobutton")}}	Firefox
`scrollbartrack-vertical` {{Non-standard_Inline}}	div { color: black; -moz-appearance: scrollbartrack-vertical; -webkit-appearance: scrollbarbartrack-vertical; } <div>Lorem</div> {{EmbedLiveSample("sampleScrollbarTrackVertical",100,50,"","", "nobutton")}}	Firefox
`searchfield` {{Non-standard_Inline}}	div { color: black; -moz-appearance: searchfield; -webkit-appearance: searchfield; } <div>Lorem</div> {{EmbedLiveSample("sampleSearchField",100,50,"","", "nobutton")}}	Firefox Chrome Safari Edge
`searchfield-decoration` {{Non-standard_Inline}}	div{ color: black; -moz-appearance: searchfield-decoration; -webkit-appearance: searchfield-decoration; } <div>Lorem</div> {{EmbedLiveSample("sample-searchfield-decoration",100,50,"","","nobutton")}}	Safari Edge
`searchfield-results-decoration` {{Non-standard_Inline}}	div{ color: black; -moz-appearance: searchfield-results-decoration; -webkit-appearance: searchfield-results-decoration; } <div>Lorem</div> {{EmbedLiveSample("sample-searchfield-results-decoration",100,50,"","","nobutton")}}	Safari Edge
`searchfield-results-button` {{Non-standard_Inline}}	div{ color: black; -moz-appearance: searchfield-results-button; -webkit-appearance: searchfield-results-button; } <div>Lorem</div> {{EmbedLiveSample("sample-searchfield-results-button",100,50,"","","nobutton")}}	Safari Edge
`searchfield-cancel-button` {{Non-standard_Inline}}	div{ color: black; -webkit-appearance: searchfield-cancel-button; } <div>Lorem</div> {{EmbedLiveSample("sampleSearchFieldCancelButton",100,50,"","", "nobutton")}}	Chrome Safari Edge
`snapshotted-plugin-overlay` {{Non-standard_Inline}}	div{ color: black; -moz-appearance: snapshotted-plugin-overlay; -webkit-appearance: snapshotted-plugin-overlay; } <div>Lorem</div> {{EmbedLiveSample("sample-snapshotted-plugin-overlay",100,50,"","","nobutton")}}	Safari
`separator` {{Non-standard_Inline}}	div { color: transparent; -moz-appearance: separator; -webkit-appearance: separator; } <div>Lorem</div> {{EmbedLiveSample("sampleSeparator",100,50,"","", "nobutton")}}	Firefox	Removed in Firefox 64.
`sheet` {{Non-standard_Inline}}	div { color: black; -moz-appearance: sheet; -webkit-appearance: sheet; } <div>Lorem</div> {{EmbedLiveSample("sampleSheet",100,50,"","", "nobutton")}}	None
`slider-horizontal` {{Non-standard_Inline}}	div{ color: black; -webkit-appearance: slider-horizontal; } <div>Lorem</div> {{EmbedLiveSample("sampleSliderHorizontal",100,50,"","", "nobutton")}}	Chrome Safari Edge
`slider-vertical` {{Non-standard_Inline}}	div{ color: black; -webkit-appearance: slider-vertical; } <div>Lorem</div> {{EmbedLiveSample("sampleSliderVertical",100,50,"","", "nobutton")}}	Chrome Safari Edge
`sliderthumb-horizontal` {{Non-standard_Inline}}	div{ color: black; -webkit-appearance: slider-thumb-horizontal; } <div>Lorem</div> {{EmbedLiveSample("sampleSliderThumbHorizontal",100,50,"","", "nobutton")}}	Chrome Safari Edge
`sliderthumb-vertical` {{Non-standard_Inline}}	div{ color: black; -webkit-appearance: slider-thumb-vertical; } <div>Lorem</div> {{EmbedLiveSample("sampleSliderThumbVertical",100,50,"","", "nobutton")}}	Chrome Safari Edge
`spinner` {{Non-standard_Inline}}	div { color: transparent; -moz-appearance: spinner; -webkit-appearance: spinner; } <div>Lorem</div> {{EmbedLiveSample("sampleSpinner",100,50,"","", "nobutton")}}	Firefox	Removed in Firefox 64.
`spinner-downbutton` {{Non-standard_Inline}}	div { color: black; -moz-appearance: spinner-downbutton; -webkit-appearance: spinner-downbutton; } <div>Lorem</div> {{EmbedLiveSample("sampleSpinnerDownbutton",100,50,"","", "nobutton")}}	Firefox	Removed in Firefox 64.
`spinner-textfield` {{Non-standard_Inline}}	div { color: black; -moz-appearance: spinner-textfield; -webkit-appearance: spinner-textfield; } <div>Lorem</div> {{EmbedLiveSample("sampleSpinnerTextfield",100,50,"","", "nobutton")}}	Firefox	Removed in Firefox 64.
`spinner-upbutton` {{Non-standard_Inline}}	div { color: black; -moz-appearance: spinner-upbutton; -webkit-appearance: spinner-upbutton; } <div>Lorem</div> {{EmbedLiveSample("sampleSpinnerUpbutton",100,50,"","", "nobutton")}}	Firefox	Removed in Firefox 64.
`splitter` {{Non-standard_Inline}}	div { color: transparent; -moz-appearance: splitter; -webkit-appearance: splitter; } <div>Lorem</div> {{EmbedLiveSample("sampleSplitter",100,50,"","", "nobutton")}}	Firefox	Removed in Firefox 64.
`square-button` {{Non-standard_Inline}}	div{ color: black; -moz-appearance: square-button; -webkit-appearance: square-button; } <div>Lorem</div> {{EmbedLiveSample("sampleSquareButton",100,50,"","", "nobutton")}}	Chrome Safari Edge
`statusbar` {{Non-standard_Inline}}	div { color: black; -moz-appearance: statusbar; -webkit-appearance: statusbar; } <div>Lorem</div> {{EmbedLiveSample("sampleStatusBar",100,50,"","", "nobutton")}}	Firefox	Removed in Firefox 64.
`statusbarpanel` {{Non-standard_Inline}}	div { color: black; -moz-appearance: statusbarpanel; -webkit-appearance: statusbarpanel; } <div>Lorem</div> {{EmbedLiveSample("sampleStatusBarPanel",100,50,"","", "nobutton")}}	Firefox	Removed in Firefox 64.
`tab` {{Non-standard_Inline}}	div { color: black; height: 20px; -moz-appearance: tab; -webkit-appearance: tab; } <div>Lorem</div> {{EmbedLiveSample("sampleTab",100,50,"","", "nobutton")}}	Firefox	Removed in Firefox 64
`tabpanel` {{Non-standard_Inline}}	div { color: black; -moz-appearance: tabpanel; -webkit-appearance: tabpanel; } <div>Lorem</div> {{EmbedLiveSample("sampleTabPanel",100,50,"","", "nobutton")}}	Firefox	Removed in Firefox 64.
`tabpanels` {{Non-standard_Inline}}	div { color: black; -moz-appearance: tabpanels; -webkit-appearance: tabpanels; } <div>Lorem</div> {{EmbedLiveSample("sampleTabPanels",100,50,"","", "nobutton")}}	Firefox	Removed in Firefox 64
`tab-scroll-arrow-back` {{Non-standard_Inline}}	div { color: black; -moz-appearance: tab-scroll-arrow-back; -webkit-appearance: tab-scroll-arrow-back; } <div>Lorem</div> {{EmbedLiveSample("sampleTabScrollArrowBack",100,50,"","", "nobutton")}}	Firefox	Removed in Firefox 64.
`tab-scroll-arrow-forward` {{Non-standard_Inline}}	div { color: black; -moz-appearance: tab-scroll-arrow-forward; -webkit-appearance: tab-scroll-arrow-forward; } <div>Lorem</div> {{EmbedLiveSample("sampleTabScrollArrowForward",100,50,"","", "nobutton")}}	Firefox	Removed in Firefox 64.
`textarea`	div{ color: black; -webkit-appearance: textarea; } <div>Lorem</div> {{EmbedLiveSample("sampleTextArea",100,50,"","", "nobutton")}}	Firefox Chrome Safari Edge
`textfield` {{Non-standard_Inline}}	div { color: black; -moz-appearance: textfield; -webkit-appearance: textfield; } <div>Lorem</div> {{EmbedLiveSample("sampleTextField",100,50,"","", "nobutton")}}	Firefox Chrome Safari Edge
`textfield-multiline` {{Non-standard_Inline}}	div { color: black; -moz-appearance: textfield-multiline; -webkit-appearance: textfield-multiline; } <div>Lorem</div> {{EmbedLiveSample("sampleTextfieldMultiline",100,50,"","", "nobutton")}}	Firefox	Use `textarea` instead
`toolbar` {{Non-standard_Inline}}	div { color: black; -moz-appearance: toolbar; -webkit-appearance: toolbar; } <div>Lorem</div> {{EmbedLiveSample("sampleToolbar",100,50,"","", "nobutton")}}	Firefox	Removed in Firefox 64.
`toolbarbutton` {{Non-standard_Inline}}	div { color: black; -moz-appearance: toolbarbutton; -webkit-appearance: toolbarbutton; } <div>Lorem</div> {{EmbedLiveSample("sampleToolbarButton",100,50,"","", "nobutton")}}	Firefox	Removed in Firefox 64.
`toolbarbutton-dropdown` {{Non-standard_Inline}}	div { color: black; -moz-appearance: toolbarbutton-dropdown; -webkit-appearance: toolbarbutton-dropdown; } <div>Lorem</div> {{EmbedLiveSample("sampleToolbarButtonDropdown",100,50,"","", "nobutton")}}	Firefox	Removed in Firefox 64.
`toolbargripper` {{Non-standard_Inline}}	div { color: black; -moz-appearance: toolbargripper; -webkit-appearance: toolbargripper; } <div>Lorem</div> {{EmbedLiveSample("sampleToolbarGripper",100,50,"","", "nobutton")}}	Firefox	Removed in Firefox 64.
`toolbox` {{Non-standard_Inline}}	div { color: black; -moz-appearance: toolbox; -webkit-appearance: toolbox; } <div>Lorem</div> {{EmbedLiveSample("sampleToolbox",100,50,"","", "nobutton")}}	Firefox	Removed in Firefox 64.
`tooltip` {{Non-standard_Inline}}	div { color: black; -moz-appearance: tooltip; -webkit-appearance: tooltip; } <div>Lorem</div> {{EmbedLiveSample("sampleTooltip",100,50,"","", "nobutton")}}	Firefox	Removed in Firefox 64.
`treeheader` {{Non-standard_Inline}}	div { color: black; -moz-appearance: treeheader; -webkit-appearance: treeheader; } <div>Lorem</div> {{EmbedLiveSample("sampleTreeHeader",100,50,"","", "nobutton")}}	Firefox	Removed in Firefox 64.
`treeheadercell` {{Non-standard_Inline}}	div { color: black; height:20px; -moz-appearance: treeheadercell; -webkit-appearance: treeheadercell; } <div>Lorem</div> {{EmbedLiveSample("sampleTreeHeaderCell",100,50,"","", "nobutton")}}	Firefox	Removed in Firefox 64.
`treeheadersortarrow` {{Non-standard_Inline}}	div { color: black; -moz-appearance: treeheadersortarrow; -webkit-appearance: treeheadersortarrow; } <div>Lorem</div> {{EmbedLiveSample("sampleTreeHeaderSortArrow",100,50,"","", "nobutton")}}	Firefox	Removed in Firefox 64.
`treeitem` {{Non-standard_Inline}}	div { color: black; -moz-appearance: treeitem; -webkit-appearance: treeitem; } <div>Lorem</div> {{EmbedLiveSample("sampleTreeItem",100,50,"","", "nobutton")}}	Firefox	Removed in Firefox 64.
`treeline` {{Non-standard_Inline}}	div { color: black; -moz-appearance: treeline; -webkit-appearance: treeline; } <div>Lorem</div> {{EmbedLiveSample("sampleTreeLine",100,50,"","", "nobutton")}}	Firefox	Removed in Firefox 64.
`treetwisty` {{Non-standard_Inline}}	div { color: transparent; -moz-appearance: treetwisty; -webkit-appearance: treetwisty; } <div>Lorem</div> {{EmbedLiveSample("sampleTreeTwisty",100,50,"","", "nobutton")}}	Firefox	Removed in Firefox 64.
`treetwistyopen` {{Non-standard_Inline}}	div { color: transparent; -moz-appearance: treetwistyopen; -webkit-appearance: treetwistyopen; } <div>Lorem</div> {{EmbedLiveSample("sampleTreeTwistyOpen",100,50,"","", "nobutton")}}	Firefox	Removed in Firefox 64.
`treeview` {{Non-standard_Inline}}	div { color: black; -moz-appearance: treeview; -webkit-appearance: treeview; } <div>Lorem</div> {{EmbedLiveSample("sampleTreeView",100,50,"","", "nobutton")}}	Firefox	Removed in Firefox 64.
`relevancy-level-indicator` {{Non-standard_Inline}}	div{ color: black; -moz-appearance: relevancy-level-indicator; -webkit-appearance: relevancy-level-indicator; } <div>Lorem</div> {{EmbedLiveSample("sample-relevancy-level-indicator",100,50,"","","nobutton")}}	Safari
`-moz-win-borderless-glass` {{Non-standard_Inline}}{{Gecko_MinVersion_Inline("2.0")}}	div { color: black; -moz-appearance: -moz-win-borderless-glass; } <div>Lorem</div> {{EmbedLiveSample("sampleWinBorderlessGlass",100,50,"","", "nobutton")}}	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_Inline}}	div { color: black; -moz-appearance: -moz-win-browsertabbar-toolbox; } <div>Lorem</div> {{EmbedLiveSample("sampleWinBrowsertabbarToolbox",100,50,"","", "nobutton")}}	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_Inline}}	div { color: black; -moz-appearance: -moz-win-communicationstext; } <div>Lorem</div> {{EmbedLiveSample("sampleWinCommunicationstext",100,50,"","", "nobutton")}}	Firefox	Removed in Firefox 64.
`-moz-win-communications-toolbox` {{Non-standard_Inline}}	div { color: black; -moz-appearance: -moz-win-communications-toolbox; } <div>Lorem</div> {{EmbedLiveSample("sampleWinCommunicationsToolbox",100,50,"","", "nobutton")}}	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_Inline}}{{Gecko_MinVersion_Inline("6.0")}}	div { color: black; -moz-appearance: -moz-win-exclude-glass; } <div>Lorem</div> {{EmbedLiveSample("sampleWinExcludeGlass",100,50,"","", "nobutton")}}	Firefox	Removed in Firefox 64. This styles is used to exclude the Aero Glass effect on the element.
`-moz-win-glass` {{Non-standard_Inline}}	div { color: black; -moz-appearance: -moz-win-glass; } <div>Lorem</div> {{EmbedLiveSample("sampleWinGlass",100,50,"","", "nobutton")}}	Firefox	Removed in Firefox 64. This style applies the Aero Glass effect to the element.
`-moz-win-media-toolbox` {{Non-standard_Inline}}	div { color: black; -moz-appearance: -moz-win-media-toolbox; } <div>Lorem</div> {{EmbedLiveSample("sampleWinMediaToolbox",100,50,"","", "nobutton")}}	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_Inline}}	div { color: black; -moz-appearance: -moz-window-button-box; } <div>Lorem</div> {{EmbedLiveSample("sampleWindowButtonBox",100,50,"","", "nobutton")}}	Firefox	Removed in Firefox 64.
`-moz-window-button-box-maximized` {{Non-standard_Inline}}	div { color: black; -moz-appearance: -moz-window-button-box-maximized; } <div>Lorem</div> {{EmbedLiveSample("sampleWindowButtonBoxMaximized",100,50,"","", "nobutton")}}	Firefox	Removed in Firefox 64.
`-moz-window-button-close` {{Non-standard_Inline}}	div { color: black; -moz-appearance: -moz-window-button-close; } <div>Lorem</div> {{EmbedLiveSample("sampleWindowButtonClose",100,50,"","", "nobutton")}}	Firefox	Removed in Firefox 64.
`-moz-window-button-maximize` {{Non-standard_Inline}}	div { color: black; -moz-appearance: -moz-window-button-maximize; } <div>Lorem</div> {{EmbedLiveSample("sampleWindowButtonMaximize",100,50,"","", "nobutton")}}	Firefox	Removed in Firefox 64.
`-moz-window-button-minimize` {{Non-standard_Inline}}	div { color: black; -moz-appearance: -moz-window-button-minimize; } <div>Lorem</div> {{EmbedLiveSample("sampleWindowButtonMinimize",100,50,"","", "nobutton")}}	Firefox	Removed in Firefox 64.
`-moz-window-button-restore` {{Non-standard_Inline}}	div { color: black; -moz-appearance: -moz-window-button-restore; } <div>Lorem</div> {{EmbedLiveSample("sampleWindowButtonRestore",100,50,"","", "nobutton")}}	Firefox	Removed in Firefox 64.
`-moz-window-frame-bottom` {{Non-standard_Inline}}	div { color: black; -moz-appearance: -moz-window-frame-bottom; } <div>Lorem</div> {{EmbedLiveSample("sampleWindowFrameBottom",100,50,"","", "nobutton")}}	Firefox	Removed in Firefox 64.
`-moz-window-frame-left` {{Non-standard_Inline}}	div { color: black; -moz-appearance: -moz-window-frame-left; } <div>Lorem</div> {{EmbedLiveSample("sampleWindowFrameLeft",100,50,"","", "nobutton")}}	Firefox	Removed in Firefox 64.
`-moz-window-frame-right` {{Non-standard_Inline}}	div { color: black; -moz-appearance: -moz-window-frame-right; } <div>Lorem</div> {{EmbedLiveSample("sampleWindowFrameRight",100,50,"","", "nobutton")}}	Firefox	Removed in Firefox 64.
`-moz-window-titlebar` {{Non-standard_Inline}}	div { color: black; -moz-appearance: -moz-window-titlebar; } <div>Lorem</div> {{EmbedLiveSample("sampleWindowTitlebar",100,50,"","", "nobutton")}}	Firefox	Removed in Firefox 64.
`-moz-window-titlebar-maximized` {{Non-standard_Inline}}	div { color: black; -moz-appearance: -moz-window-titlebar-maximized; } <div>Lorem</div> {{EmbedLiveSample("sampleWindowTitlebarMaximized",100,50,"","", "nobutton")}}	Firefox	Removed in Firefox 64.
`-apple-pay-button` {{Non-standard_Inline}}	div{ color: black; -webkit-appearance: -apple-pay-button; } <div>Lorem</div> {{EmbedLiveSample("sampleApplePayButton",100,50,"","", "nobutton")}}	Safari	iOS and macOS only. Available on the web starting in iOS 10.1 and macOS 10.12.1

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 {{Experimental_Inline}}

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 {{Non-standard_Inline}}

div{ color: black;
-moz-appearance: attachment;
-webkit-appearance: attachment; }

<div>Lorem</div>

Safari

borderless-attachment {{Non-standard_Inline}}

div{ color: black;
-moz-appearance: borderless-attachment;
-webkit-appearance: borderless-attachment; }

<div>Lorem</div>

{{EmbedLiveSample("sample-borderless-attachment",100,50,"","","nobutton")}}

Safari

button {{Non-standard_Inline}}

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 {{Non-standard_Inline}}

div { color: black;
-moz-appearance: button-arrow-down;
-webkit-appearance: button-arrow-down; }

<div>Lorem</div>

{{EmbedLiveSample("sampleButtonArrowDown",100,50,"","", "nobutton")}}

Firefox

Removed in FF 64

button-arrow-next {{Non-standard_Inline}}

div { color: black;
-moz-appearance: button-arrow-next;
-webkit-appearance: button-arrow-next; }

<div>Lorem</div>

{{EmbedLiveSample("sampleButtonArrowNext",100,50,"","", "nobutton")}}

Firefox

Removed in FF 64

button-arrow-previous {{Non-standard_Inline}}

div { color: black;
-moz-appearance: button-arrow-previous;
-webkit-appearance: button-arrow-previous; }

<div>Lorem</div>

{{EmbedLiveSample("sampleButtonArrowPrevious",100,50,"","", "nobutton")}}

Firefox

Removed in FF 64

button-arrow-up {{Non-standard_Inline}}

div { color: black;
-moz-appearance: button-arrow-up;
-webkit-appearance: button-arrow-up; }

<div>Lorem</div>

{{EmbedLiveSample("sampleButtonArrowUp",100,50,"","", "nobutton")}}

Firefox

Removed in FF 64

button-bevel {{Non-standard_Inline}}

div { color: black;
-moz-appearance: button-bevel;
-webkit-appearance: button-bevel; }

<div>Lorem</div>

{{EmbedLiveSample("sampleButtonBevel",100,50,"","", "nobutton")}}

Firefox Chrome Safari Edge

button-focus {{Non-standard_Inline}}

div { color: black;
-moz-appearance: button-focus;
-webkit-appearance: button-focus; }

<div>Lorem</div>

{{EmbedLiveSample("sampleButtonFocus",100,50,"","", "nobutton")}}

Firefox

Removed in FF 64

caps-lock-indicator {{Non-standard_Inline}}

div{ color: black;
-moz-appearance: caps-lock-indicator;
-webkit-appearance: caps-lock-indicator; }

<div>Lorem</div>

{{EmbedLiveSample("sample-caps-lock-indicator",100,50,"","","nobutton")}}

Safari Edge

caret {{Non-standard_Inline}}

div { color: black;
-moz-appearance: caret;
-webkit-appearance: caret; }

<div>Lorem</div>

Firefox Chrome Safari Edge

checkbox {{Non-standard_Inline}}

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 {{Non-standard_Inline}}

div { color: black;
-moz-appearance: checkbox-container;
-webkit-appearance: checkbox-container; }

<div>Lorem</div>

{{EmbedLiveSample("sampleCheckboxContainer",100,50,"","", "nobutton")}}

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_Inline}}

div { color: black;
-moz-appearance: checkbox-label;
-webkit-appearance: checkbox-label; }

<div>Lorem</div>

{{EmbedLiveSample("sampleCheckboxLabel",100,50,"","", "nobutton")}}

Firefox

checkmenuitem {{Non-standard_Inline}}

div { color: black; height: 20px;
-moz-appearance: checkmenuitem;
-webkit-appearance: checkmenuitem; }

<div>Lorem</div>

{{EmbedLiveSample("sampleCheckmenuitem",100,50,"","", "nobutton")}}

Firefox

color-well {{Non-standard_Inline}}

div{ color: black;
-moz-appearance: color-well;
-webkit-appearance: color-well; }

<div>Lorem</div>

Safari

input type=color

continuous-capacity-level-indicator {{Non-standard_Inline}}

div{ color: black;
-moz-appearance: continuous-capacity-level-indicator;
-webkit-appearance: continuous-capacity-level-indicator; }

<div>Lorem</div>

{{EmbedLiveSample("sample-continuous-capacity-level-indicator",100,50,"","","nobutton")}}

Safari

default-button {{Non-standard_Inline}}

div{ color: black;
-moz-appearance: default-button;
-webkit-appearance: default-button; }

<div>Lorem</div>

{{EmbedLiveSample("sample-default-button",100,50,"","","nobutton")}}

Safari Edge

discrete-capacity-level-indicator {{Non-standard_Inline}}

div{ color: black;
-moz-appearance: discrete-capacity-level-indicator;
-webkit-appearance: discrete-capacity-level-indicator; }

<div>Lorem</div>

{{EmbedLiveSample("sample-discrete-capacity-level-indicator",100,50,"","","nobutton")}}

Safari

dualbutton {{Non-standard_Inline}}

div { color: black;
-moz-appearance: dualbutton;
-webkit-appearance: dualbutton; }

<div>Lorem</div>

Firefox

Removed in FF 64

groupbox {{Non-standard_Inline}}

div { color: black;
-moz-appearance: groupbox;
-webkit-appearance: groupbox; }

<div>Lorem</div>

Firefox

Removed in FF 64

inner-spin-button {{Non-standard_Inline}}

div{ color: black;
-webkit-appearance: inner-spin-button; }

<div>Lorem</div>

{{EmbedLiveSample("sampleInnerSpinButton",100,50,"","", "nobutton")}}

Firefox Chrome Safari

image-controls-button {{Non-standard_Inline}}

div{ color: black;
-moz-appearance: image-controls-button;
-webkit-appearance: image-controls-button; }

<div>Lorem</div>

{{EmbedLiveSample("sample-image-controls-button",100,50,"","","nobutton")}}

Safari

list-button {{Non-standard_Inline}}

div{ color: black;
-moz-appearance: list-button;
-webkit-appearance: list-button; }

<div>Lorem</div>

{{EmbedLiveSample("sample-list-button",100,50,"","","nobutton")}}

Safari

datalist

listbox {{Non-standard_Inline}}

div { color: black; height:20px;
-moz-appearance: listbox;
-webkit-appearance: listbox; }

<div>Lorem</div>

Firefox Chrome Safari Edge

listitem {{Non-standard_Inline}}

div { color: black;
-moz-appearance: listitem;
-webkit-appearance: listitem; }

<div>Lorem</div>

Firefox Chrome Safari Edge

media-enter-fullscreen-button {{Non-standard_Inline}}

div{ color: black;
-webkit-appearance: media-enter-fullscreen-button; }

<div>Lorem</div>

{{EmbedLiveSample("sampleMediaEnterFullscreenButton",100,50,"","", "nobutton")}}

Chrome Safari

media-exit-fullscreen-button {{Non-standard_Inline}}

div{ color: black;
-webkit-appearance: media-exit-fullscreen-button; }

<div>Lorem</div>

{{EmbedLiveSample("sampleMediaExitFullscreenButton",100,50,"","", "nobutton")}}

Chrome Safari

media-fullscreen-volume-slider {{Non-standard_Inline}}

div{ color: black;
-moz-appearance: media-fullscreen-volume-slider;
-webkit-appearance: media-fullscreen-volume-slider; }

<div>Lorem</div>

{{EmbedLiveSample("sample-media-fullscreen-volume-slider",100,50,"","","nobutton")}}

Safari

media-fullscreen-volume-slider-thumb {{Non-standard_Inline}}

div{ color: black;
-moz-appearance: media-fullscreen-volume-slider-thumb;
-webkit-appearance: media-fullscreen-volume-slider-thumb; }

<div>Lorem</div>

{{EmbedLiveSample("sample-media-fullscreen-volume-slider-thumb",100,50,"","","nobutton")}}

Safari

media-mute-button {{Non-standard_Inline}}

div{ color: black;
-webkit-appearance: media-mute-button; }

<div>Lorem</div>

{{EmbedLiveSample("sampleMediaMuteButton",100,50,"","", "nobutton")}}

Chrome Safari Edge

media-play-button {{Non-standard_Inline}}

div{ color: black;
-webkit-appearance: media-play-button; }

<div>Lorem</div>

{{EmbedLiveSample("sampleMediaPlayButton",100,50,"","", "nobutton")}}

Chrome Safari Edge

media-overlay-play-button {{Non-standard_Inline}}

div{ color: black;
-webkit-appearance: media-overlay-play-button; }

<div>Lorem</div>

{{EmbedLiveSample("sampleMediaOverlayPlayButton",100,50,"","", "nobutton")}}

Chrome Safari

media-return-to-realtime-button {{Non-standard_Inline}}

div{ color: black;
-moz-appearance: media-return-to-realtime-button;
-webkit-appearance: media-return-to-realtime-button; }

<div>Lorem</div>

{{EmbedLiveSample("sample-media-return-to-realtime-button",100,50,"","","nobutton")}}

Safari

media-rewind-button {{Non-standard_Inline}}

div{ color: black;
-moz-appearance: media-rewind-button;
-webkit-appearance: media-rewind-button; }

<div>Lorem</div>

{{EmbedLiveSample("sample-media-rewind-button",100,50,"","","nobutton")}}

Safari

media-seek-back-button {{Non-standard_Inline}}

div{ color: black;
-moz-appearance: media-seek-back-button;
-webkit-appearance: media-seek-back-button; }

<div>Lorem</div>

{{EmbedLiveSample("sample-media-seek-back-button",100,50,"","","nobutton")}}

Safari Edge

media-seek-forward-button {{Non-standard_Inline}}

div{ color: black;
-moz-appearance: media-seek-forward-button;
-webkit-appearance: media-seek-forward-button; }

<div>Lorem</div>

{{EmbedLiveSample("sample-media-seek-forward-button",100,50,"","","nobutton")}}

Safari Edge

media-toggle-closed-captions-button {{Non-standard_Inline}}

div{ color: black;
-webkit-appearance: media-toggle-closed-captions-button; }

<div>Lorem</div>

{{EmbedLiveSample("sampleMediaToggleClosedCaptionsButton",100,50,"","", "nobutton")}}

Chrome Safari

media-slider {{Non-standard_Inline}}

div{ color: black;
-webkit-appearance: media-slider; }

<div>Lorem</div>

{{EmbedLiveSample("sampleMediaSlider",100,50,"","", "nobutton")}}

Chrome Safari Edge

media-sliderthumb {{Non-standard_Inline}}

div{ color: black;
-webkit-appearance: media-sliderthumb; }

<div>Lorem</div>

{{EmbedLiveSample("sampleMediaSliderThumb",100,50,"","", "nobutton")}}

Chrome Safari Edge

media-volume-slider-container {{Non-standard_Inline}}

div{ color: black;
-webkit-appearance: media-volume-slider-container; }

<div>Lorem</div>

{{EmbedLiveSample("sampleMediaVolumeSliderContainer",100,50,"","", "nobutton")}}

Chrome Safari

media-volume-slider-mute-button {{Non-standard_Inline}}

div{ color: black;
-moz-appearance: media-volume-slider-mute-button;
-webkit-appearance: media-volume-slider-mute-button; }

<div>Lorem</div>

{{EmbedLiveSample("sample-media-volume-slider-mute-button",100,50,"","","nobutton")}}

Safari

media-volume-slider {{Non-standard_Inline}}

div{ color: black;
-webkit-appearance: media-volume-slider; }

<div>Lorem</div>

{{EmbedLiveSample("sampleMediaVolumeSlider",100,50,"","", "nobutton")}}

Chrome Safari

media-volume-sliderthumb {{Non-standard_Inline}}

div{ color: black;
-webkit-appearance: media-volume-slider-thumb; }

<div>Lorem</div>

{{EmbedLiveSample("sampleMediaVolumeSliderThumb",100,50,"","", "nobutton")}}

Chrome Safari

media-controls-background {{Non-standard_Inline}}

div{ color: black;
-webkit-appearance: media-controls-background; }

<div>Lorem</div>

{{EmbedLiveSample("sampleMediaControlsBackground",100,50,"","", "nobutton")}}

Chrome Safari

media-controls-dark-bar-background {{Non-standard_Inline}}

div{ color: black;
-moz-appearance: media-controls-dark-bar-background;
-webkit-appearance: media-controls-dark-bar-background; }

<div>Lorem</div>

{{EmbedLiveSample("sample-media-controls-dark-bar-background",100,50,"","","nobutton")}}

Safari

media-controls-fullscreen-background {{Non-standard_Inline}}

div{ color: black;
-webkit-appearance: media-controls-fullscreen-background; }

<div>Lorem</div>

{{EmbedLiveSample("sampleMediaControlsFullscreenBackground",100,50,"","", "nobutton")}}

Chrome Safari

media-controls-light-bar-background {{Non-standard_Inline}}

div{ color: black;
-moz-appearance: media-controls-light-bar-background;
-webkit-appearance: media-controls-light-bar-background; }

<div>Lorem</div>

{{EmbedLiveSample("sample-media-controls-light-bar-background",100,50,"","","nobutton")}}

Safari

media-current-time-display {{Non-standard_Inline}}

div{ color: black;
-webkit-appearance: media-current-time-display; }

<div>Lorem</div>

{{EmbedLiveSample("sampleMediaCurrentTimeDisplay",100,50,"","", "nobutton")}}

Chrome Safari

media-time-remaining-display {{Non-standard_Inline}}

div{ color: black;
-webkit-appearance: media-time-remaining-display; }

<div>Lorem</div>

{{EmbedLiveSample("sampleMediaTimeRemainingDisplay",100,50,"","", "nobutton")}}

Chrome Safari

menuarrow {{Non-standard_Inline}}

div { color: black;
-moz-appearance: menuarrow;
-webkit-appearance: menuarrow; }

<div>Lorem</div>

Firefox

Removed in Firefox 64

menubar {{Non-standard_Inline}}

div { color: balck;
-moz-appearance: menubar;
-webkit-appearance: menubar; }

<div>Lorem</div>

Firefox

Removed in Firefox 64

menucheckbox {{Non-standard_Inline}}

div { color: black;
-moz-appearance: menucheckbox;
-webkit-appearance: menucheckbox; }

<div>Lorem</div>

{{EmbedLiveSample("sampleMenuCheckbox",100,50,"","", "nobutton")}}

Firefox

Removed in Firefox 64

menuimage {{Non-standard_Inline}}

div { color: black;
-moz-appearance: menuimage;
-webkit-appearance: menuimage; }

<div>Lorem</div>

Firefox

Removed in Firefox 64

menuitem {{Non-standard_Inline}}

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 {{Non-standard_Inline}}

div { color: black;
-moz-appearance: menuitemtext;
-webkit-appearance: menuitemtext; }

<div>Lorem</div>

{{EmbedLiveSample("sampleMenuItemText",100,50,"","", "nobutton")}}

Firefox

Removed in FF 64

menulist {{Non-standard_Inline}}

div { color: black;
-moz-appearance: menulist;
-webkit-appearance: menulist; }

<div>Lorem</div>

Firefox Chrome Safari Edge

menulist-button {{Non-standard_Inline}}

div { color: black;
-moz-appearance: menulist-button;
-webkit-appearance: menulist-button; }

<div>Lorem</div>

{{EmbedLiveSample("sampleMenuListButton",100,50,"","", "nobutton")}}

Firefox Chrome Safari Edge

The element is styled as a button that would indicate a menulist can be opened.

menulist-text {{Non-standard_Inline}}

div { color: black;
-moz-appearance: menulist-text;
-webkit-appearance: menulist-text; }

<div>Lorem</div>

{{EmbedLiveSample("sampleMenuListText",100,50,"","", "nobutton")}}

Firefox Chrome Safari Edge

menulist-textfield {{Non-standard_Inline}}

div { color: black;
-moz-appearance: menulist-textfield;
-webkit-appearance: menulist-textfield; }

<div>Lorem</div>

{{EmbedLiveSample("sampleMenuListTextfield",100,50,"","", "nobutton")}}

Firefox Chrome Safari Edge

The element is styled as the text field for a menulist. (Not implemented for the Windows platform)

menupopup {{Non-standard_Inline}}

div { color: black;
-moz-appearance: menupopup;
-webkit-appearance: menupopup; }

<div>Lorem</div>

Firefox

Removed in Firefox 64

menuradio {{Non-standard_Inline}}

div { color: black;
-moz-appearance: menuradio;
-webkit-appearance: menuradio; }

<div>Lorem</div>

Firefox

Removed in Firefox 64

menuseparator {{Non-standard_Inline}}

div { color: transparent;
-moz-appearance: menuseparator;
-webkit-appearance: menuseparator; }

<div>Lorem</div>

{{EmbedLiveSample("sampleMenuSeparator",100,50,"","", "nobutton")}}

Firefox

Removed in Firefox 64

meter

div{ color: black;
-webkit-appearance: meter; }

<div>Lorem</div>

Chrome Safari Firefox

New in Fx 64

meterbar {{Non-standard_Inline}}

div { color: black;
-moz-appearance: meterbar;
-webkit-appearance: meterbar; }

<div>Lorem</div>

Firefox

New in Fx 16. Use meter instead

meterchunk {{Non-standard_Inline}}

div { color: black;
-moz-appearance: meterchunk;
-webkit-appearance: meterchunk; }

<div>Lorem</div>

Firefox

New in Fx 16. Removed in Firefox 64.

number-input {{Non-standard_Inline}}

div { color: black;
-moz-appearance: number-input;
-webkit-appearance: number-input; }

<div>Lorem</div>

{{EmbedLiveSample("sampleNumberInput",100,50,"","", "nobutton")}}

Firefox

progress-bar

div{ color: black;
-webkit-appearance: progress-bar; }

<div>Lorem</div>

{{EmbedLiveSample("sampleProgressBarWebkit",100,50,"","", "nobutton")}}

Chrome Safari Firefox

New in Fx 64

progress-bar-value {{Non-standard_Inline}}

div{ color: black;
-webkit-appearance: progress-bar-value; }

<div>Lorem</div>

{{EmbedLiveSample("sampleProgressBarValueWebkit",100,50,"","", "nobutton")}}

Chrome Safari

progressbar {{Non-standard_Inline}}

div { color: black;
-moz-appearance: progressbar;
-webkit-appearance: progressbar; }

<div>Lorem</div>

{{EmbedLiveSample("sampleProgressBar",100,50,"","", "nobutton")}}

Firefox

The element is styled like a progress bar. Use progress-bar instead

progressbar-vertical {{Non-standard_Inline}}

div { color: transparent;
-moz-appearance: progressbar-vertical;
-webkit-appearance: preogressbar-vertical; }

<div>Lorem</div>

{{EmbedLiveSample("sampleProgressBarVertical",100,50,"","", "nobutton")}}

Firefox

progresschunk {{Non-standard_Inline}}

div { color: black;
-moz-appearance: progresschunk;
-webkit-appearance: progresschunk; }

<div>Lorem</div>

{{EmbedLiveSample("sampleProgressChunk",100,50,"","", "nobutton")}}

Firefox

Removed in Firefox 64.

progresschunk-vertical {{Non-standard_Inline}}

div { color: black;
-moz-appearance: progresschunk-vertical;
-webkit-appearance: progresschunk-vertical; }

<div>Lorem</div>

{{EmbedLiveSample("sampleProgressChunkVertical",100,50,"","", "nobutton")}}

Firefox

Removed in Firefox 64.

push-button {{Non-standard_Inline}}

div{ color: black; -webkit-appearance: push-button; }

<div>Lorem</div>

Chrome Safari Edge

radio {{Non-standard_Inline}}

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 {{Non-standard_Inline}}

div { color: black;
-moz-appearance: radio-container;
-webkit-appearance: radio-container; }

<div>Lorem</div>

{{EmbedLiveSample("sampleRadioContainer",100,50,"","", "nobutton")}}

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_Inline}}

div { color: black;
-moz-appearance: radio-label;
-webkit-appearance: radio-label; }

<div>Lorem</div>

Firefox

Removed in Firefox 64.

radiomenuitem {{Non-standard_Inline}}

div { color: black;
-moz-appearance: radiomenuitem;
-webkit-appearance: radiomenuitem; }

<div>Lorem</div>

{{EmbedLiveSample("sampleRadioMenuItem",100,50,"","", "nobutton")}}

Firefox

Removed in Firefox 64.

range {{Non-standard_Inline}}

div { color: black;
-moz-appearance: range;
-webkit-appearance: range; }

range

<div>Lorem</div>

Firefox

range-thumb {{Non-standard_Inline}}

div { color: black;
-moz-appearance: range-thumb;
-webkit-appearance: range-thumb; }

<div>Lorem</div>

Firefox

rating-level-indicator {{Non-standard_Inline}}

div{ color: black;
-moz-appearance: rating-level-indicator;
-webkit-appearance: rating-level-indicator; }

<div>Lorem</div>

{{EmbedLiveSample("sample-rating-level-indicator",100,50,"","","nobutton")}}

Safari

resizer {{Non-standard_Inline}}

div { color: transparent;
-moz-appearance: resizer;
-webkit-appearance: resizer; }

<div>Lorem</div>

Firefox

Removed in Firefox 63

resizerpanel {{Non-standard_Inline}}

div { color: black;
-moz-appearance: resizerpanel;
-webkit-appearance: resizerpanel; }

<div>Lorem</div>

{{EmbedLiveSample("sampleResizerPanel",100,50,"","", "nobutton")}}

Firefox

Removed in Firefox 63.

scale-horizontal {{Non-standard_Inline}}

div { color: transparent;
-moz-appearance: scale-horizontal;
-webkit-appearance: scale-horizontal; }

<div>Lorem</div>

{{EmbedLiveSample("sampleScaleHorizontal",100,50,"","", "nobutton")}}

Firefox

scalethumbend {{Non-standard_Inline}}

div { color: black;
-moz-appearance: scalethumbend;
-webkit-appearance: scalethumbend; }

<div>Lorem</div>

Firefox

scalethumb-horizontal {{Non-standard_Inline}}

div { color: transparent;
-moz-appearance: scalethumb-horizontal;
-webkit-appearance: scalethumb-horizontal; }

<div>Lorem</div>

{{EmbedLiveSample("sampleScaleThumbHorizontal",100,50,"","", "nobutton")}}

Firefox

scalethumbstart {{Non-standard_Inline}}

div { color: black;
-moz-appearance: scalethumbstart;
-webkit-appearance: scalethumbstart; }

<div>Lorem</div>

{{EmbedLiveSample("sampleScaleThumbStart",100,50,"","", "nobutton")}}

Firefox

scalethumbtick {{Non-standard_Inline}}

div { color: black;
-moz-appearance: scalethumbtick;
-webkit-appearance: scalethumbtick; }

<div>Lorem</div>

{{EmbedLiveSample("sampleScaleThumbTick",100,50,"","", "nobutton")}}

Firefox

scalethumb-vertical {{Non-standard_Inline}}

div { color: black;
-moz-appearance: scalethumb-vertical;
-webkit-appearance: scalethumb-vertical; }

<div>Lorem</div>

{{EmbedLiveSample("sampleScaleThumbVertical",100,50,"","", "nobutton")}}

Firefox

scale-vertical {{Non-standard_Inline}}

div { color: transparent;
-moz-appearance: scale-vertical;
-webkit-appearance: scale-vertical; }

<div>Lorem</div>

{{EmbedLiveSample("sampleScaleVertical",100,50,"","", "nobutton")}}

Firefox

scrollbarbutton-down {{Non-standard_Inline}}

div { color: black;
-moz-appearance: scrollbarbutton-down;
-webkit-appearance: scrollbarbutton-down; }

<div>Lorem</div>

{{EmbedLiveSample("sampleScrollbarButtonDown",100,50,"","", "nobutton")}}

Firefox

Removed in Firefox 63.

scrollbarbutton-left {{Non-standard_Inline}}

div { color: black;
-moz-appearance: scrollbarbutton-left;
-webkit-appearance: scrollbarbutton-left; }

<div>Lorem</div>

{{EmbedLiveSample("sampleScrollbarButtonLeft",100,50,"","", "nobutton")}}

Firefox

Removed in Firefox 63.

scrollbarbutton-right {{Non-standard_Inline}}

div { color: black;
-moz-appearance: scrollbarbutton-right;
-webkit-appearance: scrollbarbutton-right; }

<div>Lorem</div>

{{EmbedLiveSample("sampleScrollbarButtonRight",100,50,"","", "nobutton")}}

Firefox

Removed in Firefox 63.

scrollbarbutton-up {{Non-standard_Inline}}

div { color: black;
-moz-appearance: scrollbarbutton-up;
-webkit-appearance: scrollbarbutton-up; }

<div>Lorem</div>

{{EmbedLiveSample("sampleScrollbarButtonUp",100,50,"","", "nobutton")}}

Firefox

Removed in Firefox 63.

scrollbarthumb-horizontal {{Non-standard_Inline}}

div { color: black;
-moz-appearance: scrollbarthumb-horizontal;
-webkit-appearance: scrollbarthumb-horizontal; }

<div>Lorem</div>

{{EmbedLiveSample("sampleScrollbarThumbHorizontal",100,50,"","", "nobutton")}}

Firefox

scrollbarthumb-vertical {{Non-standard_Inline}}

div { color: black;
-moz-appearance: scrollbarthumb-vertical;
-webkit-appearance: scrollbarthumb-vertical; }

<div>Lorem</div>

{{EmbedLiveSample("sampleScrollbarThumbVertical",100,50,"","", "nobutton")}}

Firefox

scrollbartrack-horizontal {{Non-standard_Inline}}

div { color: black;
-moz-appearance: scrollbartrack-horizontal;
-webkit-appearance: scrollbartrack-horizontal; }

<div>Lorem</div>

{{EmbedLiveSample("sampleScrollbarTrackHorizontal",100,50,"","", "nobutton")}}

Firefox

scrollbartrack-vertical {{Non-standard_Inline}}

div { color: black;
-moz-appearance: scrollbartrack-vertical;
-webkit-appearance: scrollbarbartrack-vertical; }

<div>Lorem</div>

{{EmbedLiveSample("sampleScrollbarTrackVertical",100,50,"","", "nobutton")}}

Firefox

searchfield {{Non-standard_Inline}}

div { color: black;
-moz-appearance: searchfield;
-webkit-appearance: searchfield; }

<div>Lorem</div>

{{EmbedLiveSample("sampleSearchField",100,50,"","", "nobutton")}}

Firefox Chrome Safari Edge

searchfield-decoration {{Non-standard_Inline}}

div{ color: black;
-moz-appearance: searchfield-decoration;
-webkit-appearance: searchfield-decoration; }

<div>Lorem</div>

{{EmbedLiveSample("sample-searchfield-decoration",100,50,"","","nobutton")}}

Safari Edge

searchfield-results-decoration {{Non-standard_Inline}}

div{ color: black;
-moz-appearance: searchfield-results-decoration;
-webkit-appearance: searchfield-results-decoration; }

<div>Lorem</div>

{{EmbedLiveSample("sample-searchfield-results-decoration",100,50,"","","nobutton")}}

Safari Edge

searchfield-results-button {{Non-standard_Inline}}

div{ color: black;
-moz-appearance: searchfield-results-button;
-webkit-appearance: searchfield-results-button; }

<div>Lorem</div>

{{EmbedLiveSample("sample-searchfield-results-button",100,50,"","","nobutton")}}

Safari Edge

searchfield-cancel-button {{Non-standard_Inline}}

div{ color: black;
-webkit-appearance: searchfield-cancel-button; }

<div>Lorem</div>

{{EmbedLiveSample("sampleSearchFieldCancelButton",100,50,"","", "nobutton")}}

Chrome Safari Edge

snapshotted-plugin-overlay {{Non-standard_Inline}}

div{ color: black;
-moz-appearance: snapshotted-plugin-overlay;
-webkit-appearance: snapshotted-plugin-overlay; }

<div>Lorem</div>

{{EmbedLiveSample("sample-snapshotted-plugin-overlay",100,50,"","","nobutton")}}

Safari

separator {{Non-standard_Inline}}

div { color: transparent;
-moz-appearance: separator;
-webkit-appearance: separator; }

<div>Lorem</div>

Firefox

Removed in Firefox 64.

sheet {{Non-standard_Inline}}

div { color: black;
-moz-appearance: sheet;
-webkit-appearance: sheet; }

<div>Lorem</div>

None

slider-horizontal {{Non-standard_Inline}}

div{ color: black;
-webkit-appearance: slider-horizontal; }

<div>Lorem</div>

{{EmbedLiveSample("sampleSliderHorizontal",100,50,"","", "nobutton")}}

Chrome Safari Edge

slider-vertical {{Non-standard_Inline}}

div{ color: black;
-webkit-appearance: slider-vertical; }

<div>Lorem</div>

{{EmbedLiveSample("sampleSliderVertical",100,50,"","", "nobutton")}}

Chrome Safari Edge

sliderthumb-horizontal {{Non-standard_Inline}}

div{ color: black;
-webkit-appearance: slider-thumb-horizontal; }

<div>Lorem</div>

{{EmbedLiveSample("sampleSliderThumbHorizontal",100,50,"","", "nobutton")}}

Chrome Safari Edge

sliderthumb-vertical {{Non-standard_Inline}}

div{ color: black;
-webkit-appearance: slider-thumb-vertical; }

<div>Lorem</div>

{{EmbedLiveSample("sampleSliderThumbVertical",100,50,"","", "nobutton")}}

Chrome Safari Edge

spinner {{Non-standard_Inline}}

div { color: transparent;
-moz-appearance: spinner;
-webkit-appearance: spinner; }

<div>Lorem</div>

Firefox

Removed in Firefox 64.

spinner-downbutton {{Non-standard_Inline}}

div { color: black;
-moz-appearance: spinner-downbutton;
-webkit-appearance: spinner-downbutton; }

<div>Lorem</div>

{{EmbedLiveSample("sampleSpinnerDownbutton",100,50,"","", "nobutton")}}

Firefox

Removed in Firefox 64.

spinner-textfield {{Non-standard_Inline}}

div { color: black;
-moz-appearance: spinner-textfield;
-webkit-appearance: spinner-textfield; }

<div>Lorem</div>

{{EmbedLiveSample("sampleSpinnerTextfield",100,50,"","", "nobutton")}}

Firefox

Removed in Firefox 64.

spinner-upbutton {{Non-standard_Inline}}

div { color: black;
-moz-appearance: spinner-upbutton;
-webkit-appearance: spinner-upbutton; }

<div>Lorem</div>

{{EmbedLiveSample("sampleSpinnerUpbutton",100,50,"","", "nobutton")}}

Firefox

Removed in Firefox 64.

splitter {{Non-standard_Inline}}

div { color: transparent;
-moz-appearance: splitter;
-webkit-appearance: splitter; }

<div>Lorem</div>

Firefox

Removed in Firefox 64.

square-button {{Non-standard_Inline}}

div{ color: black;
-moz-appearance: square-button;
-webkit-appearance: square-button; }

<div>Lorem</div>

{{EmbedLiveSample("sampleSquareButton",100,50,"","", "nobutton")}}

Chrome Safari Edge

statusbar {{Non-standard_Inline}}

div { color: black;
-moz-appearance: statusbar;
-webkit-appearance: statusbar; }

<div>Lorem</div>

Firefox

Removed in Firefox 64.

statusbarpanel {{Non-standard_Inline}}

div { color: black;
-moz-appearance: statusbarpanel;
-webkit-appearance: statusbarpanel; }

<div>Lorem</div>

{{EmbedLiveSample("sampleStatusBarPanel",100,50,"","", "nobutton")}}

Firefox

Removed in Firefox 64.

tab {{Non-standard_Inline}}

div { color: black; height: 20px;
-moz-appearance: tab;
-webkit-appearance: tab; }

<div>Lorem</div>

Firefox

Removed in Firefox 64

tabpanel {{Non-standard_Inline}}

div { color: black;
-moz-appearance: tabpanel;
-webkit-appearance: tabpanel; }

<div>Lorem</div>

Firefox

Removed in Firefox 64.

tabpanels {{Non-standard_Inline}}

div { color: black;
-moz-appearance: tabpanels;
-webkit-appearance: tabpanels; }

<div>Lorem</div>

Firefox

Removed in Firefox 64

tab-scroll-arrow-back {{Non-standard_Inline}}

div { color: black;
-moz-appearance: tab-scroll-arrow-back;
-webkit-appearance: tab-scroll-arrow-back; }

<div>Lorem</div>

{{EmbedLiveSample("sampleTabScrollArrowBack",100,50,"","", "nobutton")}}

Firefox

Removed in Firefox 64.

tab-scroll-arrow-forward {{Non-standard_Inline}}

div { color: black;
-moz-appearance: tab-scroll-arrow-forward;
-webkit-appearance: tab-scroll-arrow-forward; }

<div>Lorem</div>

{{EmbedLiveSample("sampleTabScrollArrowForward",100,50,"","", "nobutton")}}

Firefox

Removed in Firefox 64.

textarea

div{ color: black;
-webkit-appearance: textarea; }

<div>Lorem</div>

Firefox Chrome Safari Edge

textfield {{Non-standard_Inline}}

div { color: black;
-moz-appearance: textfield;
-webkit-appearance: textfield; }

<div>Lorem</div>

Firefox Chrome Safari Edge

textfield-multiline {{Non-standard_Inline}}

div { color: black;
-moz-appearance: textfield-multiline;
-webkit-appearance: textfield-multiline; }

<div>Lorem</div>

{{EmbedLiveSample("sampleTextfieldMultiline",100,50,"","", "nobutton")}}

Firefox

Use textarea instead

toolbar {{Non-standard_Inline}}

div { color: black;
-moz-appearance: toolbar;
-webkit-appearance: toolbar; }

<div>Lorem</div>

Firefox

Removed in Firefox 64.

toolbarbutton {{Non-standard_Inline}}

div { color: black;
-moz-appearance: toolbarbutton;
-webkit-appearance: toolbarbutton; }

<div>Lorem</div>

{{EmbedLiveSample("sampleToolbarButton",100,50,"","", "nobutton")}}

Firefox

Removed in Firefox 64.

toolbarbutton-dropdown {{Non-standard_Inline}}

div { color: black;
-moz-appearance: toolbarbutton-dropdown;
-webkit-appearance: toolbarbutton-dropdown; }

<div>Lorem</div>

{{EmbedLiveSample("sampleToolbarButtonDropdown",100,50,"","", "nobutton")}}

Firefox

Removed in Firefox 64.

toolbargripper {{Non-standard_Inline}}

div { color: black;
-moz-appearance: toolbargripper;
-webkit-appearance: toolbargripper; }

<div>Lorem</div>

{{EmbedLiveSample("sampleToolbarGripper",100,50,"","", "nobutton")}}

Firefox

Removed in Firefox 64.

toolbox {{Non-standard_Inline}}

div { color: black;
-moz-appearance: toolbox;
-webkit-appearance: toolbox; }

<div>Lorem</div>

Firefox

Removed in Firefox 64.

tooltip {{Non-standard_Inline}}

div { color: black;
-moz-appearance: tooltip;
-webkit-appearance: tooltip; }

<div>Lorem</div>

Firefox

Removed in Firefox 64.

treeheader {{Non-standard_Inline}}

div { color: black;
-moz-appearance: treeheader;
-webkit-appearance: treeheader; }

<div>Lorem</div>

Firefox

Removed in Firefox 64.

treeheadercell {{Non-standard_Inline}}

div { color: black; height:20px;
-moz-appearance: treeheadercell;
-webkit-appearance: treeheadercell; }

<div>Lorem</div>

{{EmbedLiveSample("sampleTreeHeaderCell",100,50,"","", "nobutton")}}

Firefox

Removed in Firefox 64.

treeheadersortarrow {{Non-standard_Inline}}

div { color: black;
-moz-appearance: treeheadersortarrow;
-webkit-appearance: treeheadersortarrow; }

<div>Lorem</div>

{{EmbedLiveSample("sampleTreeHeaderSortArrow",100,50,"","", "nobutton")}}

Firefox

Removed in Firefox 64.

treeitem {{Non-standard_Inline}}

div { color: black;
-moz-appearance: treeitem;
-webkit-appearance: treeitem; }

<div>Lorem</div>

Firefox

Removed in Firefox 64.

treeline {{Non-standard_Inline}}

div { color: black;
-moz-appearance: treeline;
-webkit-appearance: treeline; }

<div>Lorem</div>

Firefox

Removed in Firefox 64.

treetwisty {{Non-standard_Inline}}

div { color: transparent;
-moz-appearance: treetwisty;
-webkit-appearance: treetwisty; }

<div>Lorem</div>

Firefox

Removed in Firefox 64.

treetwistyopen {{Non-standard_Inline}}

div { color: transparent;
-moz-appearance: treetwistyopen;
-webkit-appearance: treetwistyopen; }

<div>Lorem</div>

{{EmbedLiveSample("sampleTreeTwistyOpen",100,50,"","", "nobutton")}}

Firefox

Removed in Firefox 64.

treeview {{Non-standard_Inline}}

div { color: black;
-moz-appearance: treeview;
-webkit-appearance: treeview; }

<div>Lorem</div>

Firefox

Removed in Firefox 64.

relevancy-level-indicator {{Non-standard_Inline}}

div{ color: black;
-moz-appearance: relevancy-level-indicator;
-webkit-appearance: relevancy-level-indicator; }

<div>Lorem</div>

{{EmbedLiveSample("sample-relevancy-level-indicator",100,50,"","","nobutton")}}

Safari

-moz-win-borderless-glass {{Non-standard_Inline}}{{Gecko_MinVersion_Inline("2.0")}}

div { color: black;
-moz-appearance: -moz-win-borderless-glass; }

<div>Lorem</div>

{{EmbedLiveSample("sampleWinBorderlessGlass",100,50,"","", "nobutton")}}

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_Inline}}

div { color: black;
-moz-appearance: -moz-win-browsertabbar-toolbox; }

<div>Lorem</div>

{{EmbedLiveSample("sampleWinBrowsertabbarToolbox",100,50,"","", "nobutton")}}

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_Inline}}

div { color: black;
-moz-appearance: -moz-win-communicationstext; }

<div>Lorem</div>

{{EmbedLiveSample("sampleWinCommunicationstext",100,50,"","", "nobutton")}}

Firefox

Removed in Firefox 64.

-moz-win-communications-toolbox {{Non-standard_Inline}}

div { color: black;
-moz-appearance: -moz-win-communications-toolbox; }

<div>Lorem</div>

{{EmbedLiveSample("sampleWinCommunicationsToolbox",100,50,"","", "nobutton")}}

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_Inline}}{{Gecko_MinVersion_Inline("6.0")}}

div { color: black;
-moz-appearance: -moz-win-exclude-glass; }

<div>Lorem</div>

{{EmbedLiveSample("sampleWinExcludeGlass",100,50,"","", "nobutton")}}

Firefox

Removed in Firefox 64. This styles is used to exclude the Aero Glass effect on the element.

-moz-win-glass {{Non-standard_Inline}}

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 {{Non-standard_Inline}}

div { color: black;
-moz-appearance: -moz-win-media-toolbox; }

<div>Lorem</div>

{{EmbedLiveSample("sampleWinMediaToolbox",100,50,"","", "nobutton")}}

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_Inline}}

div { color: black;
-moz-appearance: -moz-window-button-box; }

<div>Lorem</div>

{{EmbedLiveSample("sampleWindowButtonBox",100,50,"","", "nobutton")}}

Firefox

Removed in Firefox 64.

-moz-window-button-box-maximized {{Non-standard_Inline}}

div { color: black;
-moz-appearance: -moz-window-button-box-maximized; }

<div>Lorem</div>

{{EmbedLiveSample("sampleWindowButtonBoxMaximized",100,50,"","", "nobutton")}}

Firefox

Removed in Firefox 64.

-moz-window-button-close {{Non-standard_Inline}}

div { color: black;
-moz-appearance: -moz-window-button-close; }

<div>Lorem</div>

{{EmbedLiveSample("sampleWindowButtonClose",100,50,"","", "nobutton")}}

Firefox

Removed in Firefox 64.

-moz-window-button-maximize {{Non-standard_Inline}}

div { color: black;
-moz-appearance: -moz-window-button-maximize; }

<div>Lorem</div>

{{EmbedLiveSample("sampleWindowButtonMaximize",100,50,"","", "nobutton")}}

Firefox

Removed in Firefox 64.

-moz-window-button-minimize {{Non-standard_Inline}}

div { color: black;
-moz-appearance: -moz-window-button-minimize; }

<div>Lorem</div>

{{EmbedLiveSample("sampleWindowButtonMinimize",100,50,"","", "nobutton")}}

Firefox

Removed in Firefox 64.

-moz-window-button-restore {{Non-standard_Inline}}

div { color: black;
-moz-appearance: -moz-window-button-restore; }

<div>Lorem</div>

{{EmbedLiveSample("sampleWindowButtonRestore",100,50,"","", "nobutton")}}

Firefox

Removed in Firefox 64.

-moz-window-frame-bottom {{Non-standard_Inline}}

div { color: black;
-moz-appearance: -moz-window-frame-bottom; }

<div>Lorem</div>

{{EmbedLiveSample("sampleWindowFrameBottom",100,50,"","", "nobutton")}}

Firefox

Removed in Firefox 64.

-moz-window-frame-left {{Non-standard_Inline}}

div { color: black;
-moz-appearance: -moz-window-frame-left; }

<div>Lorem</div>

{{EmbedLiveSample("sampleWindowFrameLeft",100,50,"","", "nobutton")}}

Firefox

Removed in Firefox 64.

-moz-window-frame-right {{Non-standard_Inline}}

div { color: black;
-moz-appearance: -moz-window-frame-right; }

<div>Lorem</div>

{{EmbedLiveSample("sampleWindowFrameRight",100,50,"","", "nobutton")}}

Firefox

Removed in Firefox 64.

-moz-window-titlebar {{Non-standard_Inline}}

div { color: black;
-moz-appearance: -moz-window-titlebar; }

<div>Lorem</div>

{{EmbedLiveSample("sampleWindowTitlebar",100,50,"","", "nobutton")}}

Firefox

Removed in Firefox 64.

-moz-window-titlebar-maximized {{Non-standard_Inline}}

div { color: black;
-moz-appearance: -moz-window-titlebar-maximized; }

<div>Lorem</div>

{{EmbedLiveSample("sampleWindowTitlebarMaximized",100,50,"","", "nobutton")}}

Firefox

Removed in Firefox 64.

-apple-pay-button {{Non-standard_Inline}}

div{ color: black;
-webkit-appearance: -apple-pay-button; }

<div>Lorem</div>

{{EmbedLiveSample("sampleApplePayButton",100,50,"","", "nobutton")}}

Safari

iOS and macOS only. Available on the web starting in iOS 10.1 and macOS 10.12.1

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

Примеры

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

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

Спецификация	Статус	Комментарии
{{SpecName("CSS4 Basic UI", "#appearance-switching", "appearance")}}	{{Spec2("CSS4 Basic UI")}}	Первое определение.

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

Статус

Комментарии

{{SpecName("CSS4 Basic UI", "#appearance-switching", "appearance")}}

Первое определение.

Синтаксис

Значения

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

Примеры

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

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

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