We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

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

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

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

初始值none (but this value is overridden 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标准

浏览器兼容性

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!

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