-moz-appearance (-webkit-appearance)

-moz-appearance  CSS属性在Gecko(Firefox)中使用,以基于操作系统主题的平台本地样式显示元素。

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

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

初始值none (but this value is overriden in the user agent CSS)
适用元素all elements
是否是继承属性
适用媒体visual
计算值as specified
Animation typediscrete
正规顺序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 没有任何特殊样式被应用上,这是默认的值。 但是,有这两个BUG: bug 649849bug 605985
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 这个元素将被绘制成菜单列表中的文本框。(未在Windows平台下实现)
menupopup  
menuradio  
menuseparator  
meterbar Fx 16 中的新特性
meterchunk Fx 16 中的新特性
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-win-borderless-glass 仅能在Vista及之后的系统中使用。这个样式将会应用磨砂玻璃样式, -- 但是不含边框 -- 。
-moz-win-browsertabbar-toolbox 仅能在Vista及之后的系统中使用。这个工具栏样式主要用于浏览器的标签上。
-moz-win-communicationstext  
-moz-win-communications-toolbox 仅能在Vista及之后的系统中使用。这个工具栏样式主要用于通信和生产应用,对应的前景色是 -moz-win-communicationstext.
-moz-win-exclude-glass 仅能在Vista及之后的系统中使用。这个样式用于取消元素磨砂玻璃效果。
-moz-win-glass 仅能在Vista及之后的系统中使用。这个样式用于元素应用磨砂玻璃效果
-moz-win-mediatext  
-moz-win-media-toolbox 仅能在Vista及之后的系统中使用。这个工具栏样式主要用于管理媒体对象。对应的前景色是 -moz-win-mediatext.
-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  

正规语法

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

另见

文档标签和贡献者

标签: 
 此页面的贡献者: xgqfrms-GitHub, ThomasSoloist
 最后编辑者: xgqfrms-GitHub,