Web/CSS/appearance

The appearance CSS property is used to display an element using platform-native styling, based on the operating system's theme. The -moz-appearance and -webkit-appearance properties are non-standard versions of this property, used (respectively) by Gecko (Firefox) and by WebKit-based (e.g., Safari) and Blink-based (e.g., Chrome, Opera) browsers to achieve the same thing. Note that Firefox and Edge also support -webkit-appearance, for compatibility reasons.

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.

The -moz-appearance property was used in XUL stylesheets to design custom widgets with platform-appropriate styling. It was also used in the XBL implementations of the widgets that ship with the Mozilla platform. Starting with Gecko/Firefox 80, these uses were changed to -moz-default-appearance, which should never be used outside of internal stylesheets.

Compatibility note: If you wish to use this property on websites, you should test it very carefully. Although it is supported in most modern browsers, its implementation varies. In older browsers, even the keyword none does not have the same effect on all form elements across different browsers, and some do not support it at all. The differences are smaller in the newest browsers.

Syntax

/* CSS Basic User Interface Module Level 4 values */
appearance: none;
appearance: auto;
appearance: menulist-button; 
appearance: textfield;

/* "Compat-auto" values, which have the same effect as 'auto' */
appearance: button; 
appearance: searchfield;
appearance: textarea;
appearance: push-button;
appearance: slider-horizontal;
appearance: checkbox;
appearance: radio;
appearance: square-button;
appearance: menulist;
appearance: listbox;
appearance: meter;
appearance: progress-bar;

/* Partial list of available values in Gecko */
-moz-appearance: scrollbarbutton-up;
-moz-appearance: button-bevel;

/* Partial list of available values in WebKit/Blink (as well as Gecko and Edge) */
-webkit-appearance: media-mute-button;
-webkit-appearance: caret;

Values

Standard keywords

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>	Firefox Chrome	The user agent selects the appropriate special styling based on the element. Acts as none on elements with no special styling.
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.
textfield	div { color: black; -moz-appearance: textfield; -webkit-appearance: textfield; } <div>Lorem</div>	Firefox Chrome Safari Edge
The following values are treated as equivalent to auto:
button	div { color: black; -moz-appearance: button; -webkit-appearance: button; } <div>Lorem</div>	Firefox Chrome Safari Edge	The element is drawn like a button.
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.
listbox	div { color: black; height:20px; -moz-appearance: listbox; -webkit-appearance: listbox; } <div>Lorem</div>	Firefox Chrome Safari Edge
menulist	div { color: black; -moz-appearance: menulist; -webkit-appearance: menulist; } <div>Lorem</div>	Firefox Chrome Safari Edge
meter	div{ color: black; -webkit-appearance: meter; } <div>Lorem</div>	Chrome Safari Firefox
progress-bar	div{ color: black; -webkit-appearance: progress-bar; } <div>Lorem</div>	Chrome Safari Firefox
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.
searchfield	div { color: black; -moz-appearance: searchfield; -webkit-appearance: searchfield; } <div>Lorem</div>	Firefox Chrome Safari Edge
slider-horizontal	div{ color: black; -webkit-appearance: slider-horizontal; } <div>Lorem</div>	Chrome Safari Edge
square-button	div{ color: black; -moz-appearance: square-button; -webkit-appearance: square-button; } <div>Lorem</div>	Chrome Safari Edge
textarea	div{ color: black; -webkit-appearance: textarea; } <div>Lorem</div>	Firefox Chrome Safari Edge

Non-standard keywords

The following values are implemented only for one or both of the prefixed properties, but not on the standard appearance property.

Value	Demo	Browser	Description
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-bevel	div { color: black; -moz-appearance: button-bevel; -webkit-appearance: button-bevel; } <div>Lorem</div>	Firefox Chrome Safari Edge
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-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	div { color: black; height: 20px; -moz-appearance: checkmenuitem; -webkit-appearance: checkmenuitem; } <div>Lorem</div>	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
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
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
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)
meterbar	div { color: black; -moz-appearance: meterbar; -webkit-appearance: meterbar; } <div>Lorem</div>	Firefox	Use meter instead.
number-input	div { color: black; -moz-appearance: number-input; -webkit-appearance: number-input; } <div>Lorem</div>	Firefox
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
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
relevancy-level-indicator	div{ color: black; -moz-appearance: relevancy-level-indicator; -webkit-appearance: relevancy-level-indicator; } <div>Lorem</div>	Safari
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
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-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>	Chrome Safari Edge	(Works on Chrome 51 on Windows 7)
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
sheet	div { color: black; -moz-appearance: sheet; -webkit-appearance: sheet; } <div>Lorem</div>	None
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
textfield-multiline	div { color: black; -moz-appearance: textfield-multiline; -webkit-appearance: textfield-multiline; } <div>Lorem</div>	Firefox	Use textarea instead.
-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

Obsolete values

The following values were at some point implemented for a prefixed property, but are no longer supported.

Value		Browser	Description
button-arrow-down		Firefox	Removed in Firefox 64
button-arrow-next		Firefox	Removed in Firefox 64
button-arrow-previous		Firefox	Removed in Firefox 64
button-arrow-up		Firefox	Removed in Firefox 64
button-focus		Firefox	Removed in Firefox 64
dualbutton		Firefox	Removed in Firefox 64
groupbox		Firefox	Removed in Firefox 64
menuarrow		Firefox	Removed in Firefox 64
menubar		Firefox	Removed in Firefox 64
menucheckbox		Firefox	Removed in Firefox 64
menuimage		Firefox	Removed in Firefox 64
menuitem		Firefox	Removed in Firefox 64.
menuitemtext		Firefox	Removed in Firefox 64
menupopup		Firefox	Removed in Firefox 64
menuradio		Firefox	Removed in Firefox 64
menuseparator		Firefox	Removed in Firefox 64
meterchunk		Firefox	Removed in Firefox 64.
progresschunk		Firefox	Removed in Firefox 64.
progresschunk-vertical		Firefox	Removed in Firefox 64.
radio-container		Firefox	Removed in Firefox 64.
radio-label		Firefox	Removed in Firefox 64.
radiomenuitem		Firefox	Removed in Firefox 64.
resizer		Firefox	Removed in Firefox 63
resizerpanel		Firefox	Removed in Firefox 63.
scrollbarbutton-down		Firefox	Removed in Firefox 63.
scrollbarbutton-left		Firefox	Removed in Firefox 63.
scrollbarbutton-right		Firefox	Removed in Firefox 63.
scrollbarbutton-up		Firefox	Removed in Firefox 63.
separator		Firefox	Removed in Firefox 64.
spinner		Firefox	Removed in Firefox 64.
spinner-downbutton		Firefox	Removed in Firefox 64.
spinner-textfield		Firefox	Removed in Firefox 64.
spinner-upbutton		Firefox	Removed in Firefox 64.
splitter		Firefox	Removed in Firefox 64.
statusbar		Firefox	Removed in Firefox 64.
statusbarpanel		Firefox	Removed in Firefox 64.
tab		Firefox	Removed in Firefox 64
tabpanel		Firefox	Removed in Firefox 64.
tabpanels		Firefox	Removed in Firefox 64
tab-scroll-arrow-back		Firefox	Removed in Firefox 64.
tab-scroll-arrow-forward		Firefox	Removed in Firefox 64.
toolbar		Firefox	Removed in Firefox 64.
toolbarbutton		Firefox	Removed in Firefox 64.
toolbarbutton-dropdown		Firefox	Removed in Firefox 64.
toolbargripper		Firefox	Removed in Firefox 64.
toolbox		Firefox	Removed in Firefox 64.
tooltip		Firefox	Removed in Firefox 64.
treeheader		Firefox	Removed in Firefox 64.
treeheadercell		Firefox	Removed in Firefox 64.
treeheadersortarrow		Firefox	Removed in Firefox 64.
treeitem		Firefox	Removed in Firefox 64.
treeline		Firefox	Removed in Firefox 64.
treetwisty		Firefox	Removed in Firefox 64.
treetwistyopen		Firefox	Removed in Firefox 64.
treeview		Firefox	Removed in Firefox 64.
-moz-win-borderless-glass		Firefox	Removed in Firefox 64.
-moz-win-browsertabbar-toolbox		Firefox	Removed in Firefox 64.
-moz-win-communicationstext		Firefox	Removed in Firefox 64.
-moz-win-communications-toolbox		Firefox	Removed in Firefox 64.
-moz-win-exclude-glass		Firefox	Removed in Firefox 64.
-moz-win-glass		Firefox	Removed in Firefox 64.
-moz-win-media-toolbox		Firefox	Removed in Firefox 64.
-moz-window-button-box		Firefox	Removed in Firefox 64.
-moz-window-button-box-maximized		Firefox	Removed in Firefox 64.
-moz-window-button-close		Firefox	Removed in Firefox 64.
-moz-window-button-maximize		Firefox	Removed in Firefox 64.
-moz-window-button-minimize		Firefox	Removed in Firefox 64.
-moz-window-button-restore		Firefox	Removed in Firefox 64.
-moz-window-frame-bottom		Firefox	Removed in Firefox 64.
-moz-window-frame-left		Firefox	Removed in Firefox 64.
-moz-window-frame-right		Firefox	Removed in Firefox 64.
-moz-window-titlebar		Firefox	Removed in Firefox 64.
-moz-window-titlebar-maximized		Firefox	Removed in Firefox 64.

Formal definition

Initial value	auto
Applies to	all elements
Inherited	no
Computed value	as specified
Animation type	discrete

Formal syntax

none | auto | button | textfield | menulist-button | <compat-auto>where <compat-auto> = searchfield | textarea | push-button | slider-horizontal | checkbox | radio | square-button | menulist | listbox | meter | progress-bar

Examples

Make an element look like a menulist button

.exampleone {
  appearance: menulist-button;
}

See also this JSFiddle for an example showing how you might use appearance: none to apply custom styling to radio buttons and checkboxes.

Specifications

Specification	Status	Comment
CSS Basic User Interface Module Level 4The definition of 'appearance' in that specification.	Working Draft	Initial definition.

Browser compatibility

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

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
appearance	Chrome Full support 84 Full support 84 Partial support 1 Prefixed' Prefixed' Implemented with the vendor prefix: -webkit-	Edge Full support 84 Full support 84 Partial support 12 Prefixed' Prefixed' Implemented with the vendor prefix: -webkit-	Firefox Full support 80 Full support 80 Partial support 1 Prefixed' Prefixed' Implemented with the vendor prefix: -moz- Partial support 64 Prefixed' Prefixed' Implemented with the vendor prefix: -webkit- Partial support 62 Prefixed' Disabled' Prefixed' Implemented with the vendor prefix: -webkit- Disabled' From version 62: this feature is behind the layout.css.webkit-appearance.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.	IE No support No	Opera Full support 70 Full support 70 Partial support 15 Prefixed' Prefixed' Implemented with the vendor prefix: -webkit-	Safari Partial support 3 Prefixed' Partial support 3 Prefixed' Prefixed' Implemented with the vendor prefix: -webkit-	WebView Android Full support 84 Full support 84 Partial support 1 Prefixed' Prefixed' Implemented with the vendor prefix: -webkit-	Chrome Android Full support 84 Full support 84 Partial support 18 Prefixed' Prefixed' Implemented with the vendor prefix: -webkit-	Firefox Android Full support 80 Full support 80 Partial support 4 Prefixed' Prefixed' Implemented with the vendor prefix: -moz- Partial support 64 Prefixed' Prefixed' Implemented with the vendor prefix: -webkit- Partial support 62 Prefixed' Disabled' Prefixed' Implemented with the vendor prefix: -webkit- Disabled' From version 62: this feature is behind the layout.css.webkit-appearance.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.	Opera Android Full support 60 Full support 60 Partial support 14 Prefixed' Prefixed' Implemented with the vendor prefix: -webkit-	Safari iOS Partial support 1 Prefixed' Partial support 1 Prefixed' Prefixed' Implemented with the vendor prefix: -webkit-	Samsung Internet Android Partial support 1.0 Prefixed' Partial support 1.0 Prefixed' Prefixed' Implemented with the vendor prefix: -webkit-
auto	Chrome Full support 83	Edge Full support 83	Firefox Full support 80	IE No support No	Opera Full support 69	Safari No support No	WebView Android Full support 83	Chrome Android Full support 83	Firefox Android Full support 80	Opera Android Full support 59	Safari iOS No support No	Samsung Internet Android Full support 13.0
<compat-auto> (compatibility values searchfield, textarea, push-button, slider-horizontal, checkbox, radio, square-button, menulist, listbox, meter, progress-bar, button)	Chrome Full support 83 Full support 83 Partial support 1	Edge Full support 83 Full support 83 Partial support 12	Firefox Full support 80 Full support 80 Partial support 1	IE No support No	Opera Full support 69 Full support 69 Partial support 15	Safari Partial support 3	WebView Android Full support 83 Full support 83 Partial support 1	Chrome Android Full support 83 Full support 83 Partial support 18	Firefox Android Full support 80 Full support 80 Partial support 4	Opera Android Full support 59 Full support 59 Partial support 14	Safari iOS Partial support 1	Samsung Internet Android Partial support 1.0
menulist-button	Chrome Full support 83 Full support 83 Partial support 1	Edge Full support 83 Full support 83 Partial support 12	Firefox Full support 80 Full support 80 Partial support 1 Notes' Notes' See bug 1481615.	IE No support No	Opera Full support 69 Full support 69 Partial support 15	Safari Partial support 3	WebView Android Full support 83 Full support 83 Partial support 1	Chrome Android Full support 83 Full support 83 Partial support 18	Firefox Android Full support 80 Full support 80 Partial support 4 Notes' Notes' See bug 1481615.	Opera Android Full support 59 Full support 59 Partial support 14	Safari iOS Partial support 1	Samsung Internet Android Partial support 1.0
none	Chrome Full support 1	Edge Full support 12	Firefox Full support 54 Full support 54 Partial support 1 Notes' Notes' Doesn't work with <input type="checkbox"> and <input type="radio">.	IE No support No	Opera Full support 15	Safari Full support 3	WebView Android Full support 1	Chrome Android Full support 18	Firefox Android Full support 54 Full support 54 Partial support 4 Notes' Notes' Doesn't work with <input type="checkbox"> and <input type="radio">.	Opera Android Full support 14	Safari iOS Full support 3	Samsung Internet Android Full support 1.0
textfield	Chrome Full support 83 Full support 83 Partial support 1	Edge Full support 83 Full support 83 Partial support 12	Firefox Full support 80 Full support 80 Partial support 1	IE No support No	Opera Full support 69 Full support 69 Partial support 15	Safari Partial support 3	WebView Android Full support 83 Full support 83 Partial support 1	Chrome Android Full support 83 Full support 83 Partial support 18	Firefox Android Full support 80 Full support 80 Partial support 4	Opera Android Full support 59 Full support 59 Partial support 14	Safari iOS Partial support 1	Samsung Internet Android Partial support 1.0

Legend

Full support  

Full support

Partial support  

Partial support

No support  

No support

See implementation notes.'

See implementation notes.

User must explicitly enable this feature.'

User must explicitly enable this feature.

Requires a vendor prefix or different name for use.'

Requires a vendor prefix or different name for use.

See also

• Definition of appearance in CSS 3 Basic User Interface (Candidate Recommendation from 2004-05-11).
• Dropped CSS3 features from the UI spec.4

appearance (-moz-appearance, -webkit-appearance) by Mozilla Contributors is licensed under CC-BY-SA 2.5.