-moz-appearance (-webkit-appearance)
Experimental: 这是一个实验中的功能
此功能某些浏览器尚在开发中,请参考浏览器兼容性表格以得到在不同浏览器中适合使用的前缀。由于该功能对应的标准文档可能被重新修订,所以在未来版本的浏览器中该功能的语法和行为可能随之改变。
在基于 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
也会在不同浏览器中产生差别,而且一些浏览器完全不支持这个属性。在版本较新的浏览器中这些差距会更小一些。
语法
The -moz-appearance
属性 may be specified as a single value chosen from the list below.
取值
<appearance>
是其中的一个关键字:
Value | Demo | Browser | Description | ||||
---|---|---|---|---|---|---|---|
none |
All | 不应用任何特殊样式。这是未定义元素的默认值。旧版翻译中的信息:但是,有这两个 BUG: bug 649849 和 bug 605985。 | |||||
button |
Firefox Chrome | 此元素将被作为按钮来绘制。 | |||||
button-arrow-down |
Firefox | ||||||
button-arrow-next |
Firefox | ||||||
button-arrow-previous |
Firefox | ||||||
button-arrow-up |
Firefox | ||||||
button-bevel |
Firefox Chrome | ||||||
button-focus |
Firefox | ||||||
caret |
Firefox Chrome | ||||||
checkbox |
Firefox Chrome | 此元素将被作为复选框绘制,仅包括实际的 "checkbox" 部分。 | |||||
checkbox-container |
Firefox | 此元素将被作为复选框容器绘制,可在相应的平台下带有高亮样式。一般情况下,它会包含一个标签(label)与一个复选框。 | |||||
checkbox-label |
Firefox | ||||||
checkmenuitem |
Firefox | ||||||
dualbutton |
Firefox | ||||||
groupbox |
Firefox | ||||||
inner-spin-button |
Chrome | ||||||
listbox |
Firefox Chrome | ||||||
listitem |
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 |
Firefox | ||||||
menubar |
Firefox | ||||||
menucheckbox |
Firefox | ||||||
menuimage |
Firefox | ||||||
menuitem |
Firefox | 此元素将被作为菜单项绘制,鼠标覆盖时会带有高亮效果。 | |||||
menuitemtext |
Firefox | ||||||
menulist |
Firefox Chrome | ||||||
menulist-button |
menulist-button |
Firefox Chrome | 此元素将被绘制为显示一个下拉菜单可以打开的按钮。 | ||||
menulist-text |
Firefox Chrome | ||||||
menulist-textfield |
Firefox Chrome | 这个元素将被作为菜单列表中的文本框绘制。(未在 Windows 平台下实现) | menupopup |
Firefox | |||
menuradio |
Firefox | ||||||
menuseparator |
Firefox | ||||||
meter |
Chrome | ||||||
meterbar |
Firefox | New in Fx 16. | |||||
meterchunk |
Firefox | New in Fx 16 | |||||
progress-bar |
Chrome | ||||||
progress-bar-value |
Chrome | ||||||
progressbar |
Firefox | The element is styled like a progress bar. | |||||
progressbar-vertical |
Firefox | ||||||
progresschunk |
Firefox | ||||||
progresschunk-vertical |
Firefox | ||||||
push-button |
Chrome | ||||||
radio |
Firefox Chrome | 这个元素将被作为单选框绘制,仅包括实际的"radio button"部分。 | |||||
radio-container |
Firefox | 这个元素将被作为单选框容器绘制,并且可在相应平台下带有高亮样式。一般情况下,它会包含一个标签(label)与一个单选框。 | |||||
radio-label |
Firefox | ||||||
radiomenuitem |
Firefox | ||||||
range | Firefox | ||||||
range-thumb | Firefox | ||||||
resizer |
Firefox | ||||||
resizerpanel |
Firefox | ||||||
scale-horizontal |
Firefox | ||||||
scalethumbend |
Firefox | ||||||
scalethumb-horizontal |
Firefox | ||||||
scalethumbstart |
Firefox | ||||||
scalethumbtick |
Firefox | ||||||
scalethumb-vertical |
Firefox | ||||||
scale-vertical |
Firefox | ||||||
scrollbarbutton-down |
Firefox | ||||||
scrollbarbutton-left |
Firefox | ||||||
scrollbarbutton-right |
Firefox | ||||||
scrollbarbutton-up |
Firefox | ||||||
scrollbarthumb-horizontal |
Firefox | ||||||
scrollbarthumb-vertical |
Firefox | ||||||
scrollbartrack-horizontal |
Firefox | ||||||
scrollbartrack-vertical |
Firefox | ||||||
searchfield |
Firefox Chrome | ||||||
searchfield-cancel-button |
Chrome | ||||||
separator |
Firefox | ||||||
sheet |
Firefox | ||||||
slider-horizontal |
Chrome | ||||||
slider-vertical |
Chrome | ||||||
sliderthumb-horizontal |
Chrome | ||||||
sliderthumb-vertical |
Chrome | ||||||
spinner |
Firefox | ||||||
spinner-downbutton |
Firefox | ||||||
spinner-textfield |
Firefox | ||||||
spinner-upbutton |
Firefox | ||||||
splitter |
Firefox | ||||||
square-button |
Chrome | ||||||
statusbar |
Firefox | ||||||
statusbarpanel |
Firefox | ||||||
tab |
Firefox | ||||||
tabpanel |
Firefox | ||||||
tabpanels |
Firefox | ||||||
tab-scroll-arrow-back |
Firefox | ||||||
tab-scroll-arrow-forward |
Firefox | ||||||
textarea |
Chrome | ||||||
textfield |
Firefox Chrome | ||||||
textfield-multiline |
Firefox | ||||||
toolbar |
Firefox | ||||||
toolbarbutton |
Firefox | ||||||
toolbarbutton-dropdown |
Firefox | ||||||
toolbargripper |
Firefox | ||||||
toolbox |
Firefox | ||||||
tooltip |
Firefox | ||||||
treeheader |
Firefox | ||||||
treeheadercell |
Firefox | ||||||
treeheadersortarrow |
Firefox | ||||||
treeitem |
Firefox | ||||||
treeline |
Firefox | ||||||
treetwisty |
Firefox | ||||||
treetwistyopen |
Firefox | ||||||
treeview |
Firefox | ||||||
-moz-win-borderless-glass |
Firefox | Windows Vista and later only. This style applies the Aero Glass effect -- but without a border -- to the element. | |||||
-moz-win-browsertabbar-toolbox |
Firefox | 仅支持 Vista 及更高版本的 Windows 系统。这个样式会将磨砂玻璃(Aero Glass)样式(但是不含边框)应用到元素上。 | |||||
-moz-win-browsertabbar-toolbox |
Firefox | 仅支持 Vista 及更高版本的 Windows 系统。此工具栏样式主要被用于浏览器的标签栏。 | |||||
-moz-win-communicationstext |
Firefox | ||||||
-moz-win-communications-toolbox |
Firefox |
仅支持 Vista 及更高版本的 Windows 系统。此工具栏样式是为了用于通讯和生产方面的应用程序,与之对应的前景色为
-moz-win-communicationstext 。
|
|||||
-moz-win-exclude-glass |
Firefox | 仅支持 Vista 及更高版本的 Windows 系统。此样式被用于取消元素的磨砂玻璃效果。 | |||||
-moz-win-glass |
Firefox | 仅支持 Vista 及更高版本的 Windows 系统。这个样式会将磨砂玻璃(Aero Glass)样式(但是不含边框)应用到元素上。 | |||||
-moz-win-mediatext |
Firefox | ||||||
-moz-win-media-toolbox |
Firefox |
仅支持 Vista 及更高版本的 Windows 系统。此工具栏样式主要用于管理媒体对象。与之对应的前景色为
-moz-win-mediatext 。
|
|||||
-moz-window-button-box |
Firefox | ||||||
-moz-window-button-box-maximized |
Firefox | ||||||
-moz-window-button-close |
Firefox | ||||||
-moz-window-button-maximize |
Firefox | ||||||
-moz-window-button-minimize |
Firefox | ||||||
-moz-window-button-restore |
Firefox | ||||||
-moz-window-frame-bottom |
Firefox | ||||||
-moz-window-frame-left |
Firefox | ||||||
-moz-window-frame-right |
Firefox | ||||||
-moz-window-titlebar |
Firefox | ||||||
-moz-window-titlebar-maximized |
Firefox | ||||||
-apple-pay-button |
iOS and macOS only. Available on the web starting in iOS 10.1 and macOS 10.12.1 |
示例
以下代码将使一个元素在 Firefox 中看起来像工具栏按钮:
.exampleone {
-moz-appearance: toolbarbutton;
}
可参考 这个 JSFiddle 示例,它演示了应如何使用 appearance: none
已对单选框与复选框应用自定义样式。
规范
Specification |
---|
CSS Basic User Interface Module Level 4 # appearance-switching |
浏览器兼容性
BCD tables only load in the browser
参见
- Drafted in CSS Basic UI Module Level 4.
- Definition of
appearance
in CSS 3 Basic User Interface (候选建议 2004-05-11), 过时, (appearance
属性已被新规范抛弃) - 将 CSS3 功能从 UI 标准中移除。