-webkit-appearance

这是一个实验中的技术

由于该技术的规格不稳定，请查看各种浏览器的兼容性表格以供使用。另外请注意，随着规范的变化，实验技术的语法和行为在未来版本的浏览器中可能会发生变化。

-moz-appearanceCSS属性在Gecko（火狐）用于显示使用基于操作系统的主题平台的原生样式的元素。

-webkit-appearance属性被基于WebKit（例如Safari）和基于Blink（例如Chrome，Opera）的浏览器用来实现相同的功能。请注意，出于兼容性原因，Edge还支持-webkit-appearance（而不是-ms-appearance）。

/* Partial list of available values in Gecko */
-moz-appearance: none;
-moz-appearance: button;
-moz-appearance: checkbox;
-moz-appearance: scrollbarbutton-up;

/* Partial list of available values in WebKit/Blink */
-webkit-appearance: none;
-webkit-appearance: button;
-webkit-appearance: checkbox;
-webkit-appearance: scrollbarbutton-up;

在XUL样式表中经常使用此属性来设计具有平台适当样式的自定义窗口小部件。它也用在Mozilla平台附带的小部件的XBL实现中。

兼容性说明：如果你想在网站上使用这个属性，你应该非常仔细地测试它。尽管它在大多数现代浏览器中得到支持，但其实现差异很大。在旧版浏览器中，即使关键字none在不同浏览器中的所有表单元素上也没有相同的效果，有些根本不支持。最新的浏览器差异较小。

初始值	none (but this value is overriden in the user agent CSS)
适用元素	all elements
是否是继承属性	no
适用媒体	visual
计算值	as specified
Animation type	discrete
正规顺序	the unique non-ambiguous order defined by the formal grammar

语法

该-moz-appearance属性可以被指定为从下面的列表中选择的单个值。

值

<appearance>是下列关键字之一：

Value	Demo	Description
none	div {-moz-appearance: none; -webkit-appearance: none; color: black;} <div>Lorem</div>	没有任何特殊样式被应用上，这是默认的值。但是，有这两个BUG： bug 649849 和 bug 605985。
button	div {-moz-appearance: button; -webkit-appearance: button; color: black; } <div>Lorem</div>	这个元素将被绘制成按钮样式。
button-arrow-down	div {-moz-appearance: button-arrow-down; -webkit-appearance: button-arrow-down; color: black; } <div>Lorem</div>
button-arrow-next	div {-moz-appearance: button-arrow-next; -webkit-appearance: button-arrow-next; color: black; } <div>Lorem</div>
button-arrow-previous	div {-moz-appearance: button-arrow-previous; -webkit-appearance: button-arrow-previous; color: black; } <div>Lorem</div>
button-arrow-up	div {-moz-appearance: button-arrow-up; -webkit-appearance: button-arrow-up; color: black; } <div>Lorem</div>
button-bevel	div {-moz-appearance: button-bevel; -webkit-appearance: button-bevel; color: black; } <div>Lorem</div>
button-focus	div {-moz-appearance: button-focus; -webkit-appearance: button-focus; color: black; } <div>Lorem</div>
caret	div {-moz-appearance: caret; -webkit-appearance: caret; color: black; } <div>Lorem</div>
checkbox	div {-moz-appearance: checkbox; -webkit-appearance: checkbox; color: black; } <div>Lorem</div>	这个元素将被绘制成复选框样式，仅包括可勾选的那部分。
checkbox-container	div {-moz-appearance: checkbox-container; -webkit-appearance: checkbox-container; color: black; } <div>Lorem</div>	这个元素将被绘制成复选框容器，并且可在当前平台下形成高亮样式。一般情况下，它会包含一个复选框和一个标签组件。
checkbox-label	div {-moz-appearance: checkbox-label; -webkit-appearance: checkbox-label; color: black; } <div>Lorem</div>
checkmenuitem	div {-moz-appearance: checkmenuitem; -webkit-appearance: checkmenuitem; height: 20px; color: black; } <div>Lorem</div>
dualbutton	div {-moz-appearance: dualbutton; -webkit-appearance: dualbutton; color: black; } <div>Lorem</div>
groupbox	div {-moz-appearance: groupbox; -webkit-appearance: groupbox; color: black; } <div>Lorem</div>
listbox	div {-moz-appearance: listbox; -webkit-appearance: listbox; height:20px; color: black; } <div>Lorem</div>
listitem	div {-moz-appearance: listitem; -webkit-appearance: listitem; color: black; } <div>Lorem</div>
menuarrow	div {-moz-appearance: menuarrow; -webkit-appearance: menuarrow; color: black; } <div>Lorem</div>
menubar	div {-moz-appearance: menubar; -webkit-appearance: menubar; color: balck; } <div>Lorem</div>
menucheckbox	div {-moz-appearance: menucheckbox; -webkit-appearance: menucheckbox; color: black; } <div>Lorem</div>
menuimage	div {-moz-appearance: menuimage; -webkit-appearance: menuimage; color: black; } <div>Lorem</div>
menuitem	div {-moz-appearance: menuitem; -webkit-appearance: menuitem; color: black; } <div>Lorem</div>	这个元素将被绘制成菜单项，鼠标移上去时会有高亮效果。
menuitemtext	div {-moz-appearance: menuitemtext; -webkit-appearance: menuitemtext; color: black; } <div>Lorem</div>
menulist	div {-moz-appearance: menulist; -webkit-appearance: menulist; color: black; } <div>Lorem</div>
menulist-button	div {-moz-appearance: menulist-button; -webkit-appearance: menulist-button; color: black; } <div>Lorem</div>	这个元素将被绘制成带有下拉菜单图标的按钮。
menulist-text	div {-moz-appearance: menulist-text; -webkit-appearance: menulist-text; color: black; } <div>Lorem</div>
menulist-textfield	div {-moz-appearance: menulist-textfield; -webkit-appearance: menulist-textfield; color: black; } <div>Lorem</div>	这个元素将被绘制成菜单列表中的文本框。（未在Windows平台下实现）
menupopup	div {-moz-appearance: menupopup; -webkit-appearance: menupopup; color: black; } <div>Lorem</div>
menuradio	div {-moz-appearance: menuradio; -webkit-appearance: menuradio; color: black; } <div>Lorem</div>
menuseparator	div {-moz-appearance: menuseparator; -webkit-appearance: menuseparator; color: transparent; } <div>Lorem</div>
meterbar	div {-moz-appearance: meterbar; -webkit-appearance: meterbar; color: black; } <div>Lorem</div>	Fx 16 中的新特性
meterchunk	div {-moz-appearance: meterchunk; -webkit-appearance: meterchunk; color: black; } <div>Lorem</div>	Fx 16 中的新特性
progressbar	div {-moz-appearance: progressbar; -webkit-appearance: progressbar; color: black; } <div>Lorem</div>	这个元素将被绘制成进度条样式。
progressbar-vertical	div {-moz-appearance: progressbar-vertical; -webkit-appearance: preogressbar-vertical; color: transparent; } <div>Lorem</div>
progresschunk	div {-moz-appearance: progresschunk; -webkit-appearance: progresschunk; color: black; } <div>Lorem</div>
progresschunk-vertical	div {-moz-appearance: progresschunk-vertical; -webkit-appearance: progresschunk-vertical; color: black; } <div>Lorem</div>
radio	div {-moz-appearance: radio; -webkit-appearance: radio; color: black; } <div>Lorem</div>	这个元素将被绘制成单选框样式，仅包括可勾选的那部分。
radio-container	div {-moz-appearance: radio-container; -webkit-appearance: radio-container; color: black; } <div>Lorem</div>	这个元素将被绘制成单选框容器，并且可在当前平台下形成高亮样式。一般情况下，它会包含一个单选框和一个标签组件。
radio-label	div {-moz-appearance: radio-label; -webkit-appearance: radio-label; color: black; } <div>Lorem</div>
radiomenuitem	div {-moz-appearance: radiomenuitem; -webkit-appearance: radiomenuitem; color: black; } <div>Lorem</div>
range	div {-moz-appearance: range; -webkit-appearance: radiomenuitem; color: black; } range <div>Lorem</div>
range-thumb	div {-moz-appearance: range-thumb; -webkit-appearance: range-thumb; color: black; } <div>Lorem</div>
resizer	div {-moz-appearance: resizer; -webkit-appearance: resizer; color: transparent; } <div>Lorem</div>
resizerpanel	div {-moz-appearance: resizerpanel; -webkit-appearance: resizerpanel; color: black; } <div>Lorem</div>
scale-horizontal	div {-moz-appearance: scale-horizontal; -webkit-appearance: scale-horizontal; color: transparent; } <div>Lorem</div>
scalethumbend	div {-moz-appearance: scalethumbend; -webkit-appearance: scalethumbend; color: black; } <div>Lorem</div>
scalethumb-horizontal	div {-moz-appearance: scalethumb-horizontal; -webkit-appearance: scalethumb-horizontal; color: transparent; } <div>Lorem</div>
scalethumbstart	div {-moz-appearance: scalethumbstart; -webkit-appearance: scalethumbstart; color: black; } <div>Lorem</div>
scalethumbtick	div {-moz-appearance: scalethumbtick; -webkit-appearance: scalethumbtick; color: black; } <div>Lorem</div>
scalethumb-vertical	div {-moz-appearance: scalethumb-vertical; -webkit-appearance: scalethumb-vertical; color: black; } <div>Lorem</div>
scale-vertical	div {-moz-appearance: scale-vertical; -webkit-appearance: scale-vertical; color: transparent; } <div>Lorem</div>
scrollbarbutton-down	div {-moz-appearance: scrollbarbutton-down; -webkit-appearance: scrollbarbutton-down; color: black; } <div>Lorem</div>
scrollbarbutton-left	div {-moz-appearance: scrollbarbutton-left; -webkit-appearance: scrollbarbutton-left; color: black; } <div>Lorem</div>
scrollbarbutton-right	div {-moz-appearance: scrollbarbutton-right; -webkit-appearance: scrollbarbutton-right; color: black; } <div>Lorem</div>
scrollbarbutton-up	div {-moz-appearance: scrollbarbutton-up; -webkit-appearance: scrollbarbutton-up; color: black; } <div>Lorem</div>
scrollbarthumb-horizontal	div {-moz-appearance: scrollbarthumb-horizontal; -webkit-appearance: scrollbarthumb-horizontal; color: black; } <div>Lorem</div>
scrollbarthumb-vertical	div {-moz-appearance: scrollbarthumb-vertical; -webkit-appearance: scrollbarthumb-vertical; color: black; } <div>Lorem</div>
scrollbartrack-horizontal	div {-moz-appearance: scrollbartrack-horizontal; -webkit-appearance: scrollbartrack-horizontal; color: black; } <div>Lorem</div>
scrollbartrack-vertical	div {-moz-appearance: scrollbartrack-vertical; -webkit-appearance: scrollbarbartrack-vertical; color: black; } <div>Lorem</div>
searchfield	div {-moz-appearance: searchfield; -webkit-appearance: searchfield; color: black; } <div>Lorem</div>
separator	div {-moz-appearance: separator; -webkit-appearance: separator; color: transparent; } <div>Lorem</div>
sheet	div {-moz-appearance: sheet; -webkit-appearance: sheet; color: black; } <div>Lorem</div>
spinner	div {-moz-appearance: spinner; -webkit-appearance: spinner; color: transparent; } <div>Lorem</div>
spinner-downbutton	div {-moz-appearance: spinner-downbutton; -webkit-appearance: spinner-downbutton; color: black; } <div>Lorem</div>
spinner-textfield	div {-moz-appearance: spinner-textfield; -webkit-appearance: spinner-textfield; color: black; } <div>Lorem</div>
spinner-upbutton	div {-moz-appearance: spinner-upbutton; -webkit-appearance: spinner-upbutton; color: black; } <div>Lorem</div>
splitter	div {-moz-appearance: splitter; -webkit-appearance: splitter; color: transparent; } <div>Lorem</div>
statusbar	div {-moz-appearance: statusbar; -webkit-appearance: statusbar; color: black; } <div>Lorem</div>
statusbarpanel	div {-moz-appearance: statusbarpanel; -webkit-appearance: statusbarpanel; color: black; } <div>Lorem</div>
tab	div {-moz-appearance: tab; -webkit-appearance: tab; height: 20px; color: black; } <div>Lorem</div>
tabpanel	div {-moz-appearance: tabpanel; -webkit-appearance: tabpanel; color: black; } <div>Lorem</div>
tabpanels	div {-moz-appearance: tabpanels; -webkit-appearance: tabpanels; color: black; } <div>Lorem</div>
tab-scroll-arrow-back	div {-moz-appearance: tab-scroll-arrow-back; -webkit-appearance: tab-scroll-arrow-back; color: black; } <div>Lorem</div>
tab-scroll-arrow-forward	div {-moz-appearance: tab-scroll-arrow-forward; -webkit-appearance: tab-scroll-arrow-forward; color: black; } <div>Lorem</div>
textfield	div {-moz-appearance: textfield; -webkit-appearance: textfield; color: black; } <div>Lorem</div>
textfield-multiline	div {-moz-appearance: textfield-multiline; -webkit-appearance: textfield-multiline; color: black; } <div>Lorem</div>
toolbar	div {-moz-appearance: toolbar; -webkit-appearance: toolbar; color: black; } <div>Lorem</div>
toolbarbutton	div {-moz-appearance: toolbarbutton; -webkit-appearance: toolbarbutton; color: black; } <div>Lorem</div>
toolbarbutton-dropdown	div {-moz-appearance: toolbarbutton-dropdown; -webkit-appearance: toolbarbutton-dropdown; color: black; } <div>Lorem</div>
toolbargripper	div {-moz-appearance: toolbargripper; -webkit-appearance: toolbargripper; color: black; } <div>Lorem</div>
toolbox	div {-moz-appearance: toolbox; -webkit-appearance: toolbox; color: black; } <div>Lorem</div>
tooltip	div {-moz-appearance: tooltip; -webkit-appearance: tooltip; color: black; } <div>Lorem</div>
treeheader	div {-moz-appearance: treeheader; -webkit-appearance: treeheader; color: black; } <div>Lorem</div>
treeheadercell	div {-moz-appearance: treeheadercell; -webkit-appearance: treeheadercell; height:20px; color: black; } <div>Lorem</div>
treeheadersortarrow	div {-moz-appearance: treeheadersortarrow; -webkit-appearance: treeheadersortarrow; color: black; } <div>Lorem</div>
treeitem	div {-moz-appearance: treeitem; -webkit-appearance: treeitem; color: black; } <div>Lorem</div>
treeline	div {-moz-appearance: treeline; -webkit-appearance: treeline; color: black; } <div>Lorem</div>
treetwisty	div {-moz-appearance: treetwisty; -webkit-appearance: treetwisty; color: transparent; } <div>Lorem</div>
treetwistyopen	div {-moz-appearance: treetwistyopen; -webkit-appearance: treetwistyopen; color: transparent; } <div>Lorem</div>
treeview	div {-moz-appearance: treeview; -webkit-appearance: treeview; color: black; } <div>Lorem</div>
-moz-win-borderless-glass	div {-moz-appearance: -moz-win-borderless-glass; color: black; } <div>Lorem</div>	`仅能在Vista及之后的系统中使用。`这个样式将会应用磨砂玻璃样式， -- 但是不含边框 -- 。
-moz-win-browsertabbar-toolbox	div {-moz-appearance: -moz-win-browsertabbar-toolbox; color: black; } <div>Lorem</div>	`仅能在Vista及之后的系统中使用。`这个工具栏样式主要用于浏览器的标签上。
-moz-win-communicationstext	div {-moz-appearance: -moz-win-communicationstext; color: black; } <div>Lorem</div>
-moz-win-communications-toolbox	div {-moz-appearance: -moz-win-communications-toolbox; color: black; } <div>Lorem</div>	`仅能在Vista及之后的系统中使用。`这个工具栏样式主要用于通信和生产应用，对应的前景色是 `-moz-win-communicationstext`.
-moz-win-exclude-glass	div {-moz-appearance: -moz-win-exclude-glass; color: black; } <div>Lorem</div>	`仅能在Vista及之后的系统中使用。`这个样式用于取消元素磨砂玻璃效果。
-moz-win-glass	div {-moz-appearance: -moz-win-glass; color: black; } <div>Lorem</div>	`仅能在Vista及之后的系统中使用。`这个样式用于元素应用磨砂玻璃效果
-moz-win-mediatext	div {-moz-appearance: -moz-win-mediatext; color: black; } <div>Lorem</div>
-moz-win-media-toolbox	div {-moz-appearance: -moz-win-media-toolbox; color: black; } <div>Lorem</div>	`仅能在Vista及之后的系统中使用。`这个工具栏样式主要用于管理媒体对象。对应的前景色是 `-moz-win-mediatext`.
-moz-window-button-box	div {-moz-appearance: -moz-window-button-box; color: black; } <div>Lorem</div>
-moz-window-button-box-maximized	div {-moz-appearance: -moz-window-button-box-maximized; color: black; } <div>Lorem</div>
-moz-window-button-close	div {-moz-appearance: -moz-window-button-close; color: black; } <div>Lorem</div>
-moz-window-button-maximize	div {-moz-appearance: -moz-window-button-maximize; color: black; } <div>Lorem</div>
-moz-window-button-minimize	div {-moz-appearance: -moz-window-button-minimize; color: black; } <div>Lorem</div>
-moz-window-button-restore	div {-moz-appearance: -moz-window-button-restore; color: black; } <div>Lorem</div>
-moz-window-frame-bottom	div {-moz-appearance: -moz-window-frame-bottom; color: black; } <div>Lorem</div>
-moz-window-frame-left	div {-moz-appearance: -moz-window-frame-left; color: black; } <div>Lorem</div>
-moz-window-frame-right	div {-moz-appearance: -moz-window-frame-right; color: black; } <div>Lorem</div>
-moz-window-titlebar	div {-moz-appearance: -moz-window-titlebar; color: black; } <div>Lorem</div>
-moz-window-titlebar-maximized	div {-moz-appearance: -moz-window-titlebar-maximized; color: black; } <div>Lorem</div>

正式语法

none | button | button-arrow-down | button-arrow-next | button-arrow-previous | button-arrow-up | button-bevel | button-focus | caret | checkbox | checkbox-container | checkbox-label | checkmenuitem | dualbutton | groupbox | listbox | listitem | menuarrow | menubar | menucheckbox | menuimage | menuitem | menuitemtext | menulist | menulist-button | menulist-text | menulist-textfield | menupopup | menuradio | menuseparator | meterbar | meterchunk | progressbar | progressbar-vertical | progresschunk | progresschunk-vertical | radio | radio-container | radio-label | radiomenuitem | range | range-thumb | resizer | resizerpanel | scale-horizontal | scalethumbend | scalethumb-horizontal | scalethumbstart | scalethumbtick | scalethumb-vertical | scale-vertical | scrollbarbutton-down | scrollbarbutton-left | scrollbarbutton-right | scrollbarbutton-up | scrollbarthumb-horizontal | scrollbarthumb-vertical | scrollbartrack-horizontal | scrollbartrack-vertical | searchfield | separator | sheet | spinner | spinner-downbutton | spinner-textfield | spinner-upbutton | splitter | statusbar | statusbarpanel | tab | tabpanel | tabpanels | tab-scroll-arrow-back | tab-scroll-arrow-forward | textfield | textfield-multiline | toolbar | toolbarbutton | toolbarbutton-dropdown | toolbargripper | toolbox | tooltip | treeheader | treeheadercell | treeheadersortarrow | treeitem | treeline | treetwisty | treetwistyopen | treeview | -moz-mac-unified-toolbar | -moz-win-borderless-glass | -moz-win-browsertabbar-toolbox | -moz-win-communicationstext | -moz-win-communications-toolbox | -moz-win-exclude-glass | -moz-win-glass | -moz-win-mediatext | -moz-win-media-toolbox | -moz-window-button-box | -moz-window-button-box-maximized | -moz-window-button-close | -moz-window-button-maximize | -moz-window-button-minimize | -moz-window-button-restore | -moz-window-frame-bottom | -moz-window-frame-left | -moz-window-frame-right | -moz-window-titlebar | -moz-window-titlebar-maximized

示例

下面的例子会让一个元素在Firefox中看起来像一个工具栏按钮：

.exampleone {
  -moz-appearance: toolbarbutton;
}

另请参阅此JSFiddle，其中显示了如何appearance: none将自定义样式应用于单选按钮和复选框的示例。

规范

Specification	Status	Comment
CSS Basic User Interface Module Level 3The definition of 'appearance' in that specification.	Candidate Recommendation	Initial definition

浏览器兼容性

Feature	Chrome	Edge	Firefox (Gecko)	Internet Explorer	Opera	Safari (WebKit)
Basic support	1.0	12-webkit2	1.0 (1.7 or earlier)-moz1 54 (54)3	No support2	15-webkit	3.0-webkit

Feature	Android	Edge	Firefox Mobile (Gecko)	IE Phone	Opera Mobile	Safari Mobile
Basic support	(Yes)	(Yes)-webkit	(Yes)	11.0-webkit2	(Yes)	(Yes)