您的搜索结果

-moz-appearance (-webkit-appearance)

在本文章中

语法
1. 值
2. 正规语法
示例
详述
浏览器兼容性
另见

非标准
该特性是非标准的，请尽量不要在生产环境中使用它！

-moz-appearance CSS 属性适用于基于Gecko内核的浏览器（火狐），使页面元素以操作系统平台的原生的UI样式展现。

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

请不要将这个属性用于网页中：不仅是因为这个属性不是W3C标准, 也是因为这个属性在各个浏览器中的表现不一致。甚至在同一个元素上将这个属性的值设为none，也会在不同浏览器中产生差别。并且一些浏览器也不支持这个属性

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

语法

/* 在 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;

值

<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

示例

.exampleone {
  -moz-appearance: toolbarbutton;
}

详述

appearance 属性目前不属于CSS标准

浏览器	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。

另见

Definition of appearance in CSS 3 Basic User Interface (候选建议 2004-05-11), 过时 ( appearance 属性已被新规范抛弃)
Dropped CSS3 features from the UI spec.

文档标签和贡献者

标签：

此页面的贡献者： ThomasSoloist

最后编辑者: ThomasSoloist, Oct 20, 2016, 6:17:09 PM

另见