This is an experimental technology
Check the Browser compatibility table carefully before using this in production.
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 propery, 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 widely. 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> |
None | 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 |
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
The following would 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 4 The definition of 'appearance' in that specification. |
Working Draft | Initial definition. |
Browser compatibility
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
appearance | Chrome
Full support
84
| Edge
Full support
84
| Firefox
Partial support
1
| IE No support No | Opera
Full support
70
| Safari
Partial support
3
| WebView Android
Full support
84
| Chrome Android
Full support
84
| Firefox Android
Partial support
4
| Opera Android
Partial support
14
| Safari iOS
Partial support
1
| Samsung Internet Android
Partial support
1.0
|
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 No support No | Opera Android No support No | Safari iOS No support No | Samsung Internet Android No support No |
button | Chrome Full support 1 | Edge Full support 12 | Firefox Full support 1 | 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 4 | Opera Android Full support 14 | Safari iOS Full support 1 | Samsung Internet Android Full support 1.0 |
<compat-auto> (compatibility values searchfield , textarea , push-button , slider-horizontal , checkbox , radio , square-button , menulist , listbox , meter , progress-bar ) | Chrome Full support 1 | Edge Partial support 12 | Firefox
Full support
80
| IE No support No | Opera Full support 15 | Safari Full support 3 | WebView Android Full support ≤37 | Chrome Android Full support 18 | Firefox Android Partial support 4 | Opera Android Full support 14 | Safari iOS Full support 1 | Samsung Internet Android Full support 1.0 |
menulist-button | Chrome Full support 1 | Edge Partial support 12 | Firefox
Full support
80
| IE No support No | Opera Full support 15 | Safari Full support 3 | WebView Android Full support ≤37 | Chrome Android Full support 18 | Firefox Android Partial support 4 | Opera Android Full support 14 | Safari iOS Full support 1 | Samsung Internet Android Full support 1.0 |
none | Chrome Full support 1 | Edge Full support 12 | Firefox
Full support
54
| IE No support No | Opera Full support 15 | Safari Full support 3 | WebView Android Full support 1 | Chrome Android Full support 18 | Firefox Android
Partial support
4
| Opera Android Full support 14 | Safari iOS Full support 3 | Samsung Internet Android Full support 1.0 |
textfield | Chrome Full support 1 | Edge Full support 12 | Firefox Full support 1 | 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 4 | Opera Android Full support 14 | Safari iOS Full support 1 | Samsung Internet Android Full support 1.0 |
Legend
- Full support
- Full support
- Partial support
- Partial support
- No support
- No support
- Experimental. Expect behavior to change in the future.
- Experimental. Expect behavior to change in the future.
- 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