-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 也会在不同浏览器中产生差别，而且一些浏览器完全不支持这个属性。在版本较新的浏览器中这些差距会更小一些。

初始值none
适用元素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

示例

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

.exampleone {
  -moz-appearance: toolbarbutton;
}

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

规范

Specification
CSS Basic User Interface Module Level 4
# appearance-switching

浏览器兼容性

BCD tables only load in the browser

参见