-moz-appearance (-webkit-appearance) - CSS（层叠样式表）编辑

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

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

浏览器兼容性

BCD tables only load in the browser

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. 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 标准中移除。

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

列表为空，暂无数据

词条统计

浏览：104 次

字数：80632

最后编辑：6 年前

编辑次数：0 次

友情链接

文江博客

-moz-appearance (-webkit-appearance) - CSS（层叠样式表） 编辑

语法

取值