-moz-appearance (-webkit-appearance)

Experimental

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

在基于 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 typediscrete

语法

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

取值

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

Value Demo Browser Description
none All 不应用任何特殊样式。这是未定义元素的默认值。旧版翻译中的信息：但是，有这两个BUG： bug 649849 和 bug 605985。
button Firefox Chrome 此元素将被作为按钮来绘制。
button-arrow-down Firefox
button-arrow-next Firefox
button-arrow-previous Firefox
button-arrow-up Firefox
button-bevel Firefox Chrome
button-focus Firefox
caret Firefox Chrome
checkbox Firefox Chrome 此元素将被作为复选框绘制，仅包括实际的 "checkbox" 部分。
checkbox-container Firefox 此元素将被作为复选框容器绘制，可在相应的平台下带有高亮样式。一般情况下，它会包含一个标签（label）与一个复选框。
checkbox-label Firefox
checkmenuitem Firefox
dualbutton Firefox
groupbox Firefox
inner-spin-button Chrome
listbox Firefox Chrome
listitem 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 Firefox
menubar Firefox
menucheckbox Firefox
menuimage Firefox
menuitem Firefox 此元素将被作为菜单项绘制，鼠标覆盖时会带有高亮效果。
menuitemtext Firefox
menulist Firefox Chrome
menulist-button menulist-button Firefox Chrome 此元素将被绘制为显示一个下拉菜单可以打开的按钮。
menulist-text Firefox Chrome
menulist-textfield Firefox Chrome 这个元素将被作为菜单列表中的文本框绘制。（未在 Windows 平台下实现） menupopup Firefox
menuradio Firefox
menuseparator Firefox
meter Chrome
meterbar Firefox New in Fx 16.
meterchunk Firefox New in Fx 16
progress-bar Chrome
progress-bar-value Chrome
progressbar Firefox The element is styled like a progress bar.
progressbar-vertical Firefox
progresschunk Firefox
progresschunk-vertical Firefox
push-button Chrome
radio Firefox Chrome 这个元素将被作为单选框绘制，仅包括实际的"radio button"部分。
radio-container Firefox 这个元素将被作为单选框容器绘制，并且可在相应平台下带有高亮样式。一般情况下，它会包含一个标签（label）与一个单选框。
radio-label Firefox
radiomenuitem Firefox
range Firefox
range-thumb Firefox
resizer Firefox
resizerpanel Firefox
scale-horizontal Firefox
scalethumbend Firefox
scalethumb-horizontal Firefox
scalethumbstart Firefox
scalethumbtick Firefox
scalethumb-vertical Firefox
scale-vertical Firefox
scrollbarbutton-down Firefox
scrollbarbutton-left Firefox
scrollbarbutton-right Firefox
scrollbarbutton-up Firefox
scrollbarthumb-horizontal Firefox
scrollbarthumb-vertical Firefox
scrollbartrack-horizontal Firefox
scrollbartrack-vertical Firefox
searchfield Firefox Chrome
searchfield-cancel-button Chrome
separator Firefox
sheet Firefox
slider-horizontal Chrome
slider-vertical Chrome
sliderthumb-horizontal Chrome
sliderthumb-vertical Chrome
spinner Firefox
spinner-downbutton Firefox
spinner-textfield Firefox
spinner-upbutton Firefox
splitter Firefox
square-button Chrome
statusbar Firefox
statusbarpanel Firefox
tab Firefox
tabpanel Firefox
tabpanels Firefox
tab-scroll-arrow-back Firefox
tab-scroll-arrow-forward Firefox
textarea Chrome
textfield Firefox Chrome
textfield-multiline Firefox
toolbar Firefox
toolbarbutton Firefox
toolbarbutton-dropdown Firefox
toolbargripper Firefox
toolbox Firefox
tooltip Firefox
treeheader Firefox
treeheadercell Firefox
treeheadersortarrow Firefox
treeitem Firefox
treeline Firefox
treetwisty Firefox
treetwistyopen Firefox
treeview Firefox
-moz-win-borderless-glass Firefox Windows Vista and later only. This style applies the Aero Glass effect -- but without a border -- to the element.
-moz-win-browsertabbar-toolbox Firefox 仅支持 Vista 及更高版本的 Windows 系统。这个样式会将磨砂玻璃（Aero Glass）样式（但是不含边框）应用到元素上。
-moz-win-browsertabbar-toolbox Firefox 仅支持 Vista 及更高版本的 Windows 系统。此工具栏样式主要被用于浏览器的标签栏。
-moz-win-communicationstext Firefox
-moz-win-communications-toolbox Firefox 仅支持 Vista 及更高版本的 Windows 系统。此工具栏样式是为了用于通讯和生产方面的应用程序，与之对应的前景色为 -moz-win-communicationstext。
-moz-win-exclude-glass Firefox 仅支持 Vista 及更高版本的 Windows 系统。此样式被用于取消元素的磨砂玻璃效果。
-moz-win-glass Firefox 仅支持 Vista 及更高版本的 Windows 系统。这个样式会将磨砂玻璃（Aero Glass）样式（但是不含边框）应用到元素上。
-moz-win-mediatext Firefox
-moz-win-media-toolbox Firefox 仅支持 Vista 及更高版本的 Windows 系统。此工具栏样式主要用于管理媒体对象。与之对应的前景色为 -moz-win-mediatext。
-moz-window-button-box Firefox
-moz-window-button-box-maximized Firefox
-moz-window-button-close Firefox
-moz-window-button-maximize Firefox
-moz-window-button-minimize Firefox
-moz-window-button-restore Firefox
-moz-window-frame-bottom Firefox
-moz-window-frame-left Firefox
-moz-window-frame-right Firefox
-moz-window-titlebar Firefox
-moz-window-titlebar-maximized Firefox
-apple-pay-button iOS and macOS only. Available on the web starting in iOS 10.1 and macOS 10.12.1

浏览器兼容性

BCD tables only load in the browser

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!

浏览器 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 | textfield | menulist-button | <compat-auto>
where 
<compat-auto> = searchfield | textarea | push-button | slider-horizontal | checkbox | radio | square-button | menulist | listbox | meter | progress-bar | button

示例

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

.exampleone {
  -moz-appearance: toolbarbutton;
}

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

参见