-moz-appearance (-webkit-appearance)

这是一个实验中的功能
此功能某些浏览器尚在开发中，请参考浏览器兼容性表格以得到在不同浏览器中适合使用的前缀。由于该功能对应的标准文档可能被重新修订，所以在未来版本的浏览器中该功能的语法和行为可能随之改变。

在基于 Gecko 的浏览器（如 Firefox）中，-moz-appearance CSS 属性被用于按照浏览器所在的操作系统所用主题，以平台本地的样式显示元素。

在基于 WebKit 的浏览器（如 Safari）和基于 Blink 的浏览器（如 Chrome, Opera）中，-webkit-appearance 属性被用于达到相同 to achieve the same thing. Note that Edge also supports -webkit-appearance (instead of -ms-appearance) for compatibility reasons.

/* 在 Gecko 中可用的部分值 */
-moz-appearance: none;
-moz-appearance: button;
-moz-appearance: checkbox;
-moz-appearance: scrollbarbutton-up;

/* 在 WebKit/Blink 中可用的部分值 */
-webkit-appearance: none;
-webkit-appearance: button;
-webkit-appearance: checkbox;
-webkit-appearance: scrollbarbutton-up;

这个属性经常用在 XUL 的样式表中，用来设计拥有平台原生UI样式的自定义的组件，也用于 XBL 之中以实现 Mozilla 平台的组件。

兼容性提示：如果您想在网站上使用此属性，您应非常小心地测试它。尽管在大部分现代浏览器中它是被支持的，它的实现差别很大。在版本较旧的浏览器中，即使是 none 也会在不同浏览器中产生差别，而且一些浏览器完全不支持这个属性。在版本较新的浏览器中这些差距会更小一些。

初始值	`auto`
适用元素	all elements
是否是继承属性	否
计算值	as specified
Animation type	discrete

语法

The -moz-appearance 属性may be specified as a single value chosen from the list below.

取值

<appearance> 是其中的一个关键字:

Value	Demo	Browser	Description
`none`	div {-moz-appearance: none; -webkit-appearance: none; color: black;} <div>Lorem</div>	All	不应用任何特殊样式。这是未定义元素的默认值。旧版翻译中的信息：但是，有这两个BUG： bug 649849 和 bug 605985。
`button`	div {-moz-appearance: button; -webkit-appearance: button; color: black; } <div>Lorem</div>	Firefox Chrome	此元素将被作为按钮来绘制。
`button-arrow-down`	div {-moz-appearance: button-arrow-down; -webkit-appearance: button-arrow-down; color: black; } <div>Lorem</div>	Firefox
`button-arrow-next`	div {-moz-appearance: button-arrow-next; -webkit-appearance: button-arrow-next; color: black; } <div>Lorem</div>	Firefox
`button-arrow-previous`	div {-moz-appearance: button-arrow-previous; -webkit-appearance: button-arrow-previous; color: black; } <div>Lorem</div>	Firefox
`button-arrow-up`	div {-moz-appearance: button-arrow-up; -webkit-appearance: button-arrow-up; color: black; } <div>Lorem</div>	Firefox
`button-bevel`	div {-moz-appearance: button-bevel; -webkit-appearance: button-bevel; color: black; } <div>Lorem</div>	Firefox Chrome

`button-focus`	div {-moz-appearance: button-focus; -webkit-appearance: button-focus; color: black; } <div>Lorem</div>	Firefox
`caret`	div {-moz-appearance: caret; -webkit-appearance: caret; color: black; } <div>Lorem</div>	Firefox Chrome
`checkbox`	div {-moz-appearance: checkbox; -webkit-appearance: checkbox; color: black; } <div>Lorem</div>	Firefox Chrome	此元素将被作为复选框绘制，仅包括实际的 "checkbox" 部分。
`checkbox-container`	div {-moz-appearance: checkbox-container; -webkit-appearance: checkbox-container; color: black; } <div>Lorem</div>	Firefox	此元素将被作为复选框容器绘制，可在相应的平台下带有高亮样式。一般情况下，它会包含一个标签（label）与一个复选框。
`checkbox-label`	div {-moz-appearance: checkbox-label; -webkit-appearance: checkbox-label; color: black; } <div>Lorem</div>	Firefox
`checkmenuitem`	div {-moz-appearance: checkmenuitem; -webkit-appearance: checkmenuitem; height: 20px; color: black; } <div>Lorem</div>	Firefox
`dualbutton`	div {-moz-appearance: dualbutton; -webkit-appearance: dualbutton; color: black; } <div>Lorem</div>	Firefox
`groupbox`	div {-moz-appearance: groupbox; -webkit-appearance: groupbox; color: black; } <div>Lorem</div>	Firefox
`inner-spin-button`		Chrome
`listbox`	div {-moz-appearance: listbox; -webkit-appearance: listbox; height:20px; color: black; } <div>Lorem</div>	Firefox Chrome
`listitem`	div {-moz-appearance: listitem; -webkit-appearance: listitem; color: black; } <div>Lorem</div>	Firefox Chrome
`media-enter-fullscreen-button`		Chrome
`media-exit-fullscreen-button`		Chrome
`media-mute-button`		Chrome
`media-play-button`		Chrome
`media-overlay-play-button`		Chrome
`media-toggle-closed-captions-button`		Chrome
`media-slider`		Chrome
`media-sliderthumb`		Chrome
`media-volume-slider-container`		Chrome
`media-volume-slider`		Chrome
`media-volume-sliderthumb`		Chrome
`media-controls-background`		Chrome
`media-controls-fullscreen-background`		Chrome
`media-current-time-display`		Chrome
`media-time-remaining-display`		Chrome
`menuarrow`	div {-moz-appearance: menuarrow; -webkit-appearance: menuarrow; color: black; } <div>Lorem</div>	Firefox
`menubar`	div {-moz-appearance: menubar; -webkit-appearance: menubar; color: balck; } <div>Lorem</div>	Firefox
`menucheckbox`	div {-moz-appearance: menucheckbox; -webkit-appearance: menucheckbox; color: black; } <div>Lorem</div>	Firefox
`menuimage`	div {-moz-appearance: menuimage; -webkit-appearance: menuimage; color: black; } <div>Lorem</div>	Firefox
`menuitem`	div {-moz-appearance: menuitem; -webkit-appearance: menuitem; color: black; } <div>Lorem</div>	Firefox	此元素将被作为菜单项绘制，鼠标覆盖时会带有高亮效果。
`menuitemtext`	div {-moz-appearance: menuitemtext; -webkit-appearance: menuitemtext; color: black; } <div>Lorem</div>	Firefox
`menulist`	div {-moz-appearance: menulist; -webkit-appearance: menulist; color: black; } <div>Lorem</div>	Firefox Chrome
`menulist-button`		`menulist-button`	div {-moz-appearance: menulist-button; -webkit-appearance: menulist-button; color: black; } <div>Lorem</div>	Firefox Chrome	此元素将被绘制为显示一个下拉菜单可以打开的按钮。
`menulist-text`	div {-moz-appearance: menulist-text; -webkit-appearance: menulist-text; color: black; } <div>Lorem</div>	Firefox Chrome
`menulist-textfield`	div {-moz-appearance: menulist-textfield; -webkit-appearance: menulist-textfield; color: black; } <div>Lorem</div>	Firefox Chrome	这个元素将被作为菜单列表中的文本框绘制。（未在 Windows 平台下实现）	`menupopup`	div {-moz-appearance: menupopup; -webkit-appearance: menupopup; color: black; } <div>Lorem</div>	Firefox
`menuradio`	div {-moz-appearance: menuradio; -webkit-appearance: menuradio; color: black; } <div>Lorem</div>	Firefox
`menuseparator`	div {-moz-appearance: menuseparator; -webkit-appearance: menuseparator; color: transparent; } <div>Lorem</div>	Firefox
`meter`		Chrome
`meterbar`	div {-moz-appearance: meterbar; -webkit-appearance: meterbar; color: black; } <div>Lorem</div>	Firefox	New in Fx 16.
`meterchunk`	div {-moz-appearance: meterchunk; -webkit-appearance: meterchunk; color: black; } <div>Lorem</div>	Firefox	New in Fx 16
`progress-bar`		Chrome
`progress-bar-value`		Chrome
`progressbar`	div {-moz-appearance: progressbar; -webkit-appearance: progressbar; color: black; } <div>Lorem</div>	Firefox	The element is styled like a progress bar.
`progressbar-vertical`	div {-moz-appearance: progressbar-vertical; -webkit-appearance: preogressbar-vertical; color: transparent; } <div>Lorem</div>	Firefox
`progresschunk`	div {-moz-appearance: progresschunk; -webkit-appearance: progresschunk; color: black; } <div>Lorem</div>	Firefox
`progresschunk-vertical`	div {-moz-appearance: progresschunk-vertical; -webkit-appearance: progresschunk-vertical; color: black; } <div>Lorem</div>	Firefox
`push-button`		Chrome
`radio`	div {-moz-appearance: radio; -webkit-appearance: radio; color: black; } <div>Lorem</div>	Firefox Chrome	这个元素将被作为单选框绘制，仅包括实际的"radio button"部分。
`radio-container`	div {-moz-appearance: radio-container; -webkit-appearance: radio-container; color: black; } <div>Lorem</div>	Firefox	这个元素将被作为单选框容器绘制，并且可在相应平台下带有高亮样式。一般情况下，它会包含一个标签（label）与一个单选框。
`radio-label`	div {-moz-appearance: radio-label; -webkit-appearance: radio-label; color: black; } <div>Lorem</div>	Firefox
`radiomenuitem`	div {-moz-appearance: radiomenuitem; -webkit-appearance: radiomenuitem; color: black; } <div>Lorem</div>	Firefox
range	div {-moz-appearance: range; -webkit-appearance: radiomenuitem; color: black; } range <div>Lorem</div>	Firefox
range-thumb	div {-moz-appearance: range-thumb; -webkit-appearance: range-thumb; color: black; } <div>Lorem</div>	Firefox
`resizer`	div {-moz-appearance: resizer; -webkit-appearance: resizer; color: transparent; } <div>Lorem</div>	Firefox
`resizerpanel`	div {-moz-appearance: resizerpanel; -webkit-appearance: resizerpanel; color: black; } <div>Lorem</div>	Firefox
`scale-horizontal`	div {-moz-appearance: scale-horizontal; -webkit-appearance: scale-horizontal; color: transparent; } <div>Lorem</div>	Firefox
`scalethumbend`	div {-moz-appearance: scalethumbend; -webkit-appearance: scalethumbend; color: black; } <div>Lorem</div>	Firefox
`scalethumb-horizontal`	div {-moz-appearance: scalethumb-horizontal; -webkit-appearance: scalethumb-horizontal; color: transparent; } <div>Lorem</div>	Firefox
`scalethumbstart`	div {-moz-appearance: scalethumbstart; -webkit-appearance: scalethumbstart; color: black; } <div>Lorem</div>	Firefox
`scalethumbtick`	div {-moz-appearance: scalethumbtick; -webkit-appearance: scalethumbtick; color: black; } <div>Lorem</div>	Firefox
`scalethumb-vertical`	div {-moz-appearance: scalethumb-vertical; -webkit-appearance: scalethumb-vertical; color: black; } <div>Lorem</div>	Firefox
`scale-vertical`	div {-moz-appearance: scale-vertical; -webkit-appearance: scale-vertical; color: transparent; } <div>Lorem</div>	Firefox
`scrollbarbutton-down`	div {-moz-appearance: scrollbarbutton-down; -webkit-appearance: scrollbarbutton-down; color: black; } <div>Lorem</div>	Firefox
`scrollbarbutton-left`	div {-moz-appearance: scrollbarbutton-left; -webkit-appearance: scrollbarbutton-left; color: black; } <div>Lorem</div>	Firefox
`scrollbarbutton-right`	div {-moz-appearance: scrollbarbutton-right; -webkit-appearance: scrollbarbutton-right; color: black; } <div>Lorem</div>	Firefox
`scrollbarbutton-up`	div {-moz-appearance: scrollbarbutton-up; -webkit-appearance: scrollbarbutton-up; color: black; } <div>Lorem</div>	Firefox
`scrollbarthumb-horizontal`	div {-moz-appearance: scrollbarthumb-horizontal; -webkit-appearance: scrollbarthumb-horizontal; color: black; } <div>Lorem</div>	Firefox
`scrollbarthumb-vertical`	div {-moz-appearance: scrollbarthumb-vertical; -webkit-appearance: scrollbarthumb-vertical; color: black; } <div>Lorem</div>	Firefox
`scrollbartrack-horizontal`	div {-moz-appearance: scrollbartrack-horizontal; -webkit-appearance: scrollbartrack-horizontal; color: black; } <div>Lorem</div>	Firefox
`scrollbartrack-vertical`	div {-moz-appearance: scrollbartrack-vertical; -webkit-appearance: scrollbarbartrack-vertical; color: black; } <div>Lorem</div>	Firefox
`searchfield`	div {-moz-appearance: searchfield; -webkit-appearance: searchfield; color: black; } <div>Lorem</div>	Firefox Chrome
`searchfield-cancel-button`		Chrome
`separator`	div {-moz-appearance: separator; -webkit-appearance: separator; color: transparent; } <div>Lorem</div>	Firefox
`sheet`	div {-moz-appearance: sheet; -webkit-appearance: sheet; color: black; } <div>Lorem</div>	Firefox
`slider-horizontal`		Chrome
`slider-vertical`		Chrome
`sliderthumb-horizontal`		Chrome
`sliderthumb-vertical`		Chrome
`spinner`	div {-moz-appearance: spinner; -webkit-appearance: spinner; color: transparent; } <div>Lorem</div>	Firefox
`spinner-downbutton`	div {-moz-appearance: spinner-downbutton; -webkit-appearance: spinner-downbutton; color: black; } <div>Lorem</div>	Firefox
`spinner-textfield`	div {-moz-appearance: spinner-textfield; -webkit-appearance: spinner-textfield; color: black; } <div>Lorem</div>	Firefox
`spinner-upbutton`	div {-moz-appearance: spinner-upbutton; -webkit-appearance: spinner-upbutton; color: black; } <div>Lorem</div>	Firefox
`splitter`	div {-moz-appearance: splitter; -webkit-appearance: splitter; color: transparent; } <div>Lorem</div>	Firefox
`square-button`		Chrome
`statusbar`	div {-moz-appearance: statusbar; -webkit-appearance: statusbar; color: black; } <div>Lorem</div>	Firefox
`statusbarpanel`	div {-moz-appearance: statusbarpanel; -webkit-appearance: statusbarpanel; color: black; } <div>Lorem</div>	Firefox
`tab`	div {-moz-appearance: tab; -webkit-appearance: tab; height: 20px; color: black; } <div>Lorem</div>	Firefox
`tabpanel`	div {-moz-appearance: tabpanel; -webkit-appearance: tabpanel; color: black; } <div>Lorem</div>	Firefox
`tabpanels`	div {-moz-appearance: tabpanels; -webkit-appearance: tabpanels; color: black; } <div>Lorem</div>	Firefox
`tab-scroll-arrow-back`	div {-moz-appearance: tab-scroll-arrow-back; -webkit-appearance: tab-scroll-arrow-back; color: black; } <div>Lorem</div>	Firefox
`tab-scroll-arrow-forward`	div {-moz-appearance: tab-scroll-arrow-forward; -webkit-appearance: tab-scroll-arrow-forward; color: black; } <div>Lorem</div>	Firefox
`textarea`		Chrome
`textfield`	div {-moz-appearance: textfield; -webkit-appearance: textfield; color: black; } <div>Lorem</div>	Firefox Chrome
`textfield-multiline`	div {-moz-appearance: textfield-multiline; -webkit-appearance: textfield-multiline; color: black; } <div>Lorem</div>	Firefox
`toolbar`	div {-moz-appearance: toolbar; -webkit-appearance: toolbar; color: black; } <div>Lorem</div>	Firefox
`toolbarbutton`	div {-moz-appearance: toolbarbutton; -webkit-appearance: toolbarbutton; color: black; } <div>Lorem</div>	Firefox
`toolbarbutton-dropdown`	div {-moz-appearance: toolbarbutton-dropdown; -webkit-appearance: toolbarbutton-dropdown; color: black; } <div>Lorem</div>	Firefox
`toolbargripper`	div {-moz-appearance: toolbargripper; -webkit-appearance: toolbargripper; color: black; } <div>Lorem</div>	Firefox
`toolbox`	div {-moz-appearance: toolbox; -webkit-appearance: toolbox; color: black; } <div>Lorem</div>	Firefox
`tooltip`	div {-moz-appearance: tooltip; -webkit-appearance: tooltip; color: black; } <div>Lorem</div>	Firefox
`treeheader`	div {-moz-appearance: treeheader; -webkit-appearance: treeheader; color: black; } <div>Lorem</div>	Firefox
`treeheadercell`	div {-moz-appearance: treeheadercell; -webkit-appearance: treeheadercell; height:20px; color: black; } <div>Lorem</div>	Firefox
`treeheadersortarrow`	div {-moz-appearance: treeheadersortarrow; -webkit-appearance: treeheadersortarrow; color: black; } <div>Lorem</div>	Firefox
`treeitem`	div {-moz-appearance: treeitem; -webkit-appearance: treeitem; color: black; } <div>Lorem</div>	Firefox
`treeline`	div {-moz-appearance: treeline; -webkit-appearance: treeline; color: black; } <div>Lorem</div>	Firefox
`treetwisty`	div {-moz-appearance: treetwisty; -webkit-appearance: treetwisty; color: transparent; } <div>Lorem</div>	Firefox
`treetwistyopen`	div {-moz-appearance: treetwistyopen; -webkit-appearance: treetwistyopen; color: transparent; } <div>Lorem</div>	Firefox
`treeview`	div {-moz-appearance: treeview; -webkit-appearance: treeview; color: black; } <div>Lorem</div>	Firefox
`-moz-win-borderless-glass`	div {-moz-appearance: -moz-win-borderless-glass; color: black; } <div>Lorem</div>	Firefox	Windows Vista and later only. This style applies the Aero Glass effect -- but without a border -- to the element.
`-moz-win-browsertabbar-toolbox`	div {-moz-appearance: -moz-win-browsertabbar-toolbox; color: black; } <div>Lorem</div>	Firefox	仅支持 Vista 及更高版本的 Windows 系统。这个样式会将磨砂玻璃（Aero Glass）样式（但是不含边框）应用到元素上。
`-moz-win-browsertabbar-toolbox`	div {-moz-appearance: -moz-win-browsertabbar-toolbox; color: black; } <div>Lorem</div>	Firefox	仅支持 Vista 及更高版本的 Windows 系统。此工具栏样式主要被用于浏览器的标签栏。
`-moz-win-communicationstext`	div {-moz-appearance: -moz-win-communicationstext; color: black; } <div>Lorem</div>	Firefox
`-moz-win-communications-toolbox`	div {-moz-appearance: -moz-win-communications-toolbox; color: black; } <div>Lorem</div>	Firefox	仅支持 Vista 及更高版本的 Windows 系统。此工具栏样式是为了用于通讯和生产方面的应用程序，与之对应的前景色为 `-moz-win-communicationstext`。
`-moz-win-exclude-glass`	div {-moz-appearance: -moz-win-exclude-glass; color: black; } <div>Lorem</div>	Firefox	仅支持 Vista 及更高版本的 Windows 系统。此样式被用于取消元素的磨砂玻璃效果。
`-moz-win-glass`	div {-moz-appearance: -moz-win-glass; color: black; } <div>Lorem</div>	Firefox	仅支持 Vista 及更高版本的 Windows 系统。这个样式会将磨砂玻璃（Aero Glass）样式（但是不含边框）应用到元素上。
`-moz-win-mediatext`	div {-moz-appearance: -moz-win-mediatext; color: black; } <div>Lorem</div>	Firefox

`-moz-win-media-toolbox`	div {-moz-appearance: -moz-win-media-toolbox; color: black; } <div>Lorem</div>	Firefox	仅支持 Vista 及更高版本的 Windows 系统。此工具栏样式主要用于管理媒体对象。与之对应的前景色为 `-moz-win-mediatext`。
`-moz-window-button-box`	div {-moz-appearance: -moz-window-button-box; color: black; } <div>Lorem</div>	Firefox
`-moz-window-button-box-maximized`	div {-moz-appearance: -moz-window-button-box-maximized; color: black; } <div>Lorem</div>	Firefox
`-moz-window-button-close`	div {-moz-appearance: -moz-window-button-close; color: black; } <div>Lorem</div>	Firefox
`-moz-window-button-maximize`	div {-moz-appearance: -moz-window-button-maximize; color: black; } <div>Lorem</div>	Firefox
`-moz-window-button-minimize`	div {-moz-appearance: -moz-window-button-minimize; color: black; } <div>Lorem</div>	Firefox
`-moz-window-button-restore`	div {-moz-appearance: -moz-window-button-restore; color: black; } <div>Lorem</div>	Firefox
`-moz-window-frame-bottom`	div {-moz-appearance: -moz-window-frame-bottom; color: black; } <div>Lorem</div>	Firefox
`-moz-window-frame-left`	div {-moz-appearance: -moz-window-frame-left; color: black; } <div>Lorem</div>	Firefox
`-moz-window-frame-right`	div {-moz-appearance: -moz-window-frame-right; color: black; } <div>Lorem</div>	Firefox
`-moz-window-titlebar`	div {-moz-appearance: -moz-window-titlebar; color: black; } <div>Lorem</div>	Firefox
`-moz-window-titlebar-maximized`	div {-moz-appearance: -moz-window-titlebar-maximized; color: black; } <div>Lorem</div>	Firefox
`-apple-pay-button`			iOS and macOS only. Available on the web starting in iOS 10.1 and macOS 10.12.1

浏览器兼容性

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.

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Desktop
Mobile

浏览器	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari (WebKit)
最低支持	1.0	1.0 (1.7 or earlier)-moz^[1]	未实现	?	3.0-webkit

浏览器	Android	Firefox Mobile (Gecko)	IE Phone	Opera Mobile	Safari Mobile
最低支持	?	1.0 (1.0)	11.0-webkit^[2]	?	?

[1] 不完全支持。

[2] 只有 none, button, 和 textfield 值被支持，详见 the documentation on MSDN。

正式语法

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

示例

以下代码将使一个元素在 Firefox 中看起来像工具栏按钮：

.exampleone {
  -moz-appearance: toolbarbutton;
}

可参考这个 JSFiddle 示例，它演示了应如何使用 appearance: none 已对单选框与复选框应用自定义样式。

参见

Drafted in CSS Basic UI Module Level 4.

Definition of appearance in CSS 3 Basic User Interface (候选建议 2004-05-11), 过时， ( appearance 属性已被新规范抛弃)
将 CSS3 功能从 UI 标准中移除。

语法

取值

浏览器兼容性

Legend

正式语法

示例

参见

学习 Web 开发的最佳实践