--- title: '-moz-appearance (-webkit-appearance)' slug: Web/CSS/appearance tags: - CSS translation_of: Web/CSS/appearance ---
{{CSSRef}} {{SeeCompatTable}}

在基于 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 也会在不同浏览器中产生差别，而且一些浏览器完全不支持这个属性。在版本较新的浏览器中这些差距会更小一些。

{{cssinfo}}

语法

The -moz-appearance 属性may be specified as a single value chosen from the list below.

取值

<appearance> 是其中的一个关键字:

Value Demo Browser Description
none {{EmbedLiveSample("sampleNone",100,50,"","", "nobutton")}} All 不应用任何特殊样式。这是未定义元素的默认值。旧版翻译中的信息：但是，有这两个BUG： {{bug(649849)}} 和 {{bug(605985)}}。
button {{EmbedLiveSample("sampleButton",100,50,"","", "nobutton")}} Firefox Chrome 此元素将被作为按钮来绘制。
button-arrow-down {{EmbedLiveSample("sampleButtonArrowDown",100,50,"","", "nobutton")}} Firefox
button-arrow-next {{EmbedLiveSample("sampleButtonArrowNext",100,50,"","", "nobutton")}} Firefox
button-arrow-previous {{EmbedLiveSample("sampleButtonArrowPrevious",100,50,"","", "nobutton")}} Firefox
button-arrow-up {{EmbedLiveSample("sampleButtonArrowUp",100,50,"","", "nobutton")}} Firefox
button-bevel {{EmbedLiveSample("sampleButtonBevel",100,50,"","", "nobutton")}} Firefox Chrome
button-focus {{EmbedLiveSample("sampleButtonFocus",100,50,"","", "nobutton")}} Firefox
caret {{EmbedLiveSample("sampleCaret",100,50,"","", "nobutton")}} Firefox Chrome
checkbox {{EmbedLiveSample("sampleCheckbox",100,50,"","", "nobutton")}} Firefox Chrome 此元素将被作为复选框绘制，仅包括实际的 "checkbox" 部分。
checkbox-container {{EmbedLiveSample("sampleCheckboxContainer",100,50,"","", "nobutton")}} Firefox 此元素将被作为复选框容器绘制，可在相应的平台下带有高亮样式。一般情况下，它会包含一个标签（label）与一个复选框。
checkbox-label {{EmbedLiveSample("sampleCheckboxLabel",100,50,"","", "nobutton")}} Firefox
checkmenuitem {{EmbedLiveSample("sampleCheckmenuitem",100,50,"","", "nobutton")}} Firefox
dualbutton {{EmbedLiveSample("sampleDualButton",100,50,"","", "nobutton")}} Firefox
groupbox {{EmbedLiveSample("sampleGroupbox",100,50,"","", "nobutton")}} Firefox
inner-spin-button Chrome
listbox {{EmbedLiveSample("sampleListBox",100,50,"","", "nobutton")}} Firefox Chrome
listitem {{EmbedLiveSample("sampleListItem",100,50,"","", "nobutton")}} 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 {{EmbedLiveSample("sampleMenuArrow",100,50,"","", "nobutton")}} Firefox
menubar {{EmbedLiveSample("sampleMenubar",100,50,"","", "nobutton")}} Firefox
menucheckbox {{EmbedLiveSample("sampleMenuCheckbox",100,50,"","", "nobutton")}} Firefox
menuimage {{EmbedLiveSample("sampleMenuImage",100,50,"","", "nobutton")}} Firefox
menuitem {{EmbedLiveSample("sampleMenuItem",100,50,"","", "nobutton")}} Firefox 此元素将被作为菜单项绘制，鼠标覆盖时会带有高亮效果。
menuitemtext {{EmbedLiveSample("sampleMenuItemText",100,50,"","", "nobutton")}} Firefox
menulist {{EmbedLiveSample("sampleMenuList",100,50,"","", "nobutton")}} Firefox Chrome
menulist-button menulist-button {{EmbedLiveSample("sampleMenuListButton",100,50,"","", "nobutton")}} Firefox Chrome 此元素将被绘制为显示一个下拉菜单可以打开的按钮。
menulist-text {{EmbedLiveSample("sampleMenuListText",100,50,"","", "nobutton")}} Firefox Chrome
menulist-textfield {{EmbedLiveSample("sampleMenuListTextfield",100,50,"","", "nobutton")}} Firefox Chrome 这个元素将被作为菜单列表中的文本框绘制。（未在 Windows 平台下实现） menupopup {{EmbedLiveSample("sampleMenuPopup",100,50,"","", "nobutton")}} Firefox
menuradio {{EmbedLiveSample("sampleMenuRadio",100,50,"","", "nobutton")}} Firefox
menuseparator {{EmbedLiveSample("sampleMenuSeparator",100,50,"","", "nobutton")}} Firefox
meter Chrome
meterbar {{EmbedLiveSample("sampleMeterbar",100,50,"","", "nobutton")}} Firefox New in Fx 16.
meterchunk {{EmbedLiveSample("sampleMeterchunk",100,50,"","", "nobutton")}} Firefox New in Fx 16
progress-bar Chrome
progress-bar-value Chrome
progressbar {{EmbedLiveSample("sampleProgressBar",100,50,"","", "nobutton")}} Firefox The element is styled like a progress bar.
progressbar-vertical {{EmbedLiveSample("sampleProgressBarVertical",100,50,"","", "nobutton")}} Firefox
progresschunk {{EmbedLiveSample("sampleProgressChunk",100,50,"","", "nobutton")}} Firefox
progresschunk-vertical {{EmbedLiveSample("sampleProgressChunkVertical",100,50,"","", "nobutton")}} Firefox
push-button Chrome
radio {{EmbedLiveSample("sampleRadio",100,50,"","", "nobutton")}} Firefox Chrome 这个元素将被作为单选框绘制，仅包括实际的"radio button"部分。
radio-container {{EmbedLiveSample("sampleRadioContainer",100,50,"","", "nobutton")}} Firefox 这个元素将被作为单选框容器绘制，并且可在相应平台下带有高亮样式。一般情况下，它会包含一个标签（label）与一个单选框。
radio-label {{EmbedLiveSample("sampleRadioLabel",100,50,"","", "nobutton")}} Firefox
radiomenuitem {{EmbedLiveSample("sampleRadioMenuItem",100,50,"","", "nobutton")}} Firefox
range {{EmbedLiveSample("sampleRange",100,50,"","", "nobutton")}} Firefox
range-thumb {{EmbedLiveSample("sampleRangeThumb",100,50,"","", "nobutton")}} Firefox
resizer {{EmbedLiveSample("sampleResizer",100,50,"","", "nobutton")}} Firefox
resizerpanel {{EmbedLiveSample("sampleResizerPanel",100,50,"","", "nobutton")}} Firefox
scale-horizontal {{EmbedLiveSample("sampleScaleHorizontal",100,50,"","", "nobutton")}} Firefox
scalethumbend {{EmbedLiveSample("sampleThumbEnd",100,50,"","", "nobutton")}} Firefox
scalethumb-horizontal {{EmbedLiveSample("sampleScaleThumbHorizontal",100,50,"","", "nobutton")}} Firefox
scalethumbstart {{EmbedLiveSample("sampleScaleThumbStart",100,50,"","", "nobutton")}} Firefox
scalethumbtick {{EmbedLiveSample("sampleScaleThumbTick",100,50,"","", "nobutton")}} Firefox
scalethumb-vertical {{EmbedLiveSample("sampleScaleThumbVertical",100,50,"","", "nobutton")}} Firefox
scale-vertical {{EmbedLiveSample("sampleScaleVertical",100,50,"","", "nobutton")}} Firefox
scrollbarbutton-down {{EmbedLiveSample("sampleScrollbarButtonDown",100,50,"","", "nobutton")}} Firefox
scrollbarbutton-left {{EmbedLiveSample("sampleScrollbarButtonLeft",100,50,"","", "nobutton")}} Firefox
scrollbarbutton-right {{EmbedLiveSample("sampleScrollbarButtonRight",100,50,"","", "nobutton")}} Firefox
scrollbarbutton-up {{EmbedLiveSample("sampleScrollbarButtonUp",100,50,"","", "nobutton")}} Firefox
scrollbarthumb-horizontal {{EmbedLiveSample("sampleScrollbarThumbHorizontal",100,50,"","", "nobutton")}} Firefox
scrollbarthumb-vertical {{EmbedLiveSample("sampleScrollbarThumbVertical",100,50,"","", "nobutton")}} Firefox
scrollbartrack-horizontal {{EmbedLiveSample("sampleScrollbarTrackHorizontal",100,50,"","", "nobutton")}} Firefox
scrollbartrack-vertical {{EmbedLiveSample("sampleScrollbarTrackVertical",100,50,"","", "nobutton")}} Firefox
searchfield {{EmbedLiveSample("sampleSearchField",100,50,"","", "nobutton")}} Firefox Chrome
searchfield-cancel-button Chrome
separator {{EmbedLiveSample("sampleSeparator",100,50,"","", "nobutton")}} Firefox
sheet {{EmbedLiveSample("sampleSheet",100,50,"","", "nobutton")}} Firefox
slider-horizontal Chrome
slider-vertical Chrome
sliderthumb-horizontal Chrome
sliderthumb-vertical Chrome
spinner {{EmbedLiveSample("sampleSpinner",100,50,"","", "nobutton")}} Firefox
spinner-downbutton {{EmbedLiveSample("sampleSpinnerDownbutton",100,50,"","", "nobutton")}} Firefox
spinner-textfield {{EmbedLiveSample("sampleSpinnerTextfield",100,50,"","", "nobutton")}} Firefox
spinner-upbutton {{EmbedLiveSample("sampleSpinnerUpbutton",100,50,"","", "nobutton")}} Firefox
splitter {{EmbedLiveSample("sampleSplitter",100,50,"","", "nobutton")}} Firefox
square-button Chrome
statusbar {{EmbedLiveSample("sampleStatusBar",100,50,"","", "nobutton")}} Firefox
statusbarpanel {{EmbedLiveSample("sampleStatusBarPanel",100,50,"","", "nobutton")}} Firefox
tab {{EmbedLiveSample("sampleTab",100,50,"","", "nobutton")}} Firefox
tabpanel {{EmbedLiveSample("sampleTabPanel",100,50,"","", "nobutton")}} Firefox
tabpanels {{EmbedLiveSample("sampleTabPanels",100,50,"","", "nobutton")}} Firefox
tab-scroll-arrow-back {{EmbedLiveSample("sampleTabScrollArrowBack",100,50,"","", "nobutton")}} Firefox
tab-scroll-arrow-forward {{EmbedLiveSample("sampleTabScrollArrowForward",100,50,"","", "nobutton")}} Firefox
textarea Chrome
textfield {{EmbedLiveSample("sampleTextField",100,50,"","", "nobutton")}} Firefox Chrome
textfield-multiline {{EmbedLiveSample("sampleTextfieldMultiline",100,50,"","", "nobutton")}} Firefox
toolbar {{EmbedLiveSample("sampleToolbar",100,50,"","", "nobutton")}} Firefox
toolbarbutton {{EmbedLiveSample("sampleToolbarButton",100,50,"","", "nobutton")}} Firefox
toolbarbutton-dropdown {{EmbedLiveSample("sampleToolbarButtonDropdown",100,50,"","", "nobutton")}} Firefox
toolbargripper {{EmbedLiveSample("sampleToolbarGripper",100,50,"","", "nobutton")}} Firefox
toolbox {{EmbedLiveSample("sampleToolbox",100,50,"","", "nobutton")}} Firefox
tooltip {{EmbedLiveSample("sampleTooltip",100,50,"","", "nobutton")}} Firefox
treeheader {{EmbedLiveSample("sampleTreeHeader",100,50,"","", "nobutton")}} Firefox
treeheadercell {{EmbedLiveSample("sampleTreeHeaderCell",100,50,"","", "nobutton")}} Firefox
treeheadersortarrow {{EmbedLiveSample("sampleTreeHeaderSortArrow",100,50,"","", "nobutton")}} Firefox
treeitem {{EmbedLiveSample("sampleTreeItem",100,50,"","", "nobutton")}} Firefox
treeline {{EmbedLiveSample("sampleTreeLine",100,50,"","", "nobutton")}} Firefox
treetwisty {{EmbedLiveSample("sampleTreeTwisty",100,50,"","", "nobutton")}} Firefox
treetwistyopen {{EmbedLiveSample("sampleTreeTwistyOpen",100,50,"","", "nobutton")}} Firefox
treeview {{EmbedLiveSample("sampleTreeView",100,50,"","", "nobutton")}} Firefox
{{gecko_minversion_inline("2.0")}} -moz-win-borderless-glass {{EmbedLiveSample("sampleWinBorderlessGlass",100,50,"","", "nobutton")}} Firefox Windows Vista and later only. This style applies the Aero Glass effect -- but without a border -- to the element.
-moz-win-browsertabbar-toolbox {{EmbedLiveSample("sampleWinBrowsertabbarToolbox",100,50,"","", "nobutton")}} Firefox 仅支持 Vista 及更高版本的 Windows 系统。这个样式会将磨砂玻璃（Aero Glass）样式（但是不含边框）应用到元素上。
-moz-win-browsertabbar-toolbox {{EmbedLiveSample("sampleWinBrowsertabbarToolbox",100,50,"","", "nobutton")}} Firefox 仅支持 Vista 及更高版本的 Windows 系统。此工具栏样式主要被用于浏览器的标签栏。
-moz-win-communicationstext {{EmbedLiveSample("sampleWinCommunicationstext",100,50,"","", "nobutton")}} Firefox
-moz-win-communications-toolbox {{EmbedLiveSample("sampleWinCommunicationsToolbox",100,50,"","", "nobutton")}} Firefox 仅支持 Vista 及更高版本的 Windows 系统。此工具栏样式是为了用于通讯和生产方面的应用程序，与之对应的前景色为 -moz-win-communicationstext。
{{gecko_minversion_inline("6.0")}} -moz-win-exclude-glass {{EmbedLiveSample("sampleWinExcludeGlass",100,50,"","", "nobutton")}} Firefox 仅支持 Vista 及更高版本的 Windows 系统。此样式被用于取消元素的磨砂玻璃效果。
-moz-win-glass {{EmbedLiveSample("sampleWinGlass",100,50,"","", "nobutton")}} Firefox 仅支持 Vista 及更高版本的 Windows 系统。这个样式会将磨砂玻璃（Aero Glass）样式（但是不含边框）应用到元素上。
-moz-win-mediatext {{EmbedLiveSample("sampleWinMediaText",100,50,"","", "nobutton")}} Firefox
-moz-win-media-toolbox {{EmbedLiveSample("sampleWinMediaToolbox",100,50,"","", "nobutton")}} Firefox 仅支持 Vista 及更高版本的 Windows 系统。此工具栏样式主要用于管理媒体对象。与之对应的前景色为 -moz-win-mediatext。
-moz-window-button-box {{EmbedLiveSample("sampleWindowButtonBox",100,50,"","", "nobutton")}} Firefox
-moz-window-button-box-maximized {{EmbedLiveSample("sampleWindowButtonBoxMaximized",100,50,"","", "nobutton")}} Firefox
-moz-window-button-close {{EmbedLiveSample("sampleWindowButtonClose",100,50,"","", "nobutton")}} Firefox
-moz-window-button-maximize {{EmbedLiveSample("sampleWindowButtonMaximize",100,50,"","", "nobutton")}} Firefox
-moz-window-button-minimize {{EmbedLiveSample("sampleWindowButtonMinimize",100,50,"","", "nobutton")}} Firefox
-moz-window-button-restore {{EmbedLiveSample("sampleWindowButtonRestore",100,50,"","", "nobutton")}} Firefox
-moz-window-frame-bottom {{EmbedLiveSample("sampleWindowFrameBottom",100,50,"","", "nobutton")}} Firefox
-moz-window-frame-left {{EmbedLiveSample("sampleWindowFrameLeft",100,50,"","", "nobutton")}} Firefox
-moz-window-frame-right {{EmbedLiveSample("sampleWindowFrameRight",100,50,"","", "nobutton")}} Firefox
-moz-window-titlebar {{EmbedLiveSample("sampleWindowTitlebar",100,50,"","", "nobutton")}} Firefox
-moz-window-titlebar-maximized {{EmbedLiveSample("sampleWindowTitlebarMaximized",100,50,"","", "nobutton")}} Firefox
-apple-pay-button iOS and macOS only. Available on the web starting in iOS 10.1 and macOS 10.12.1

浏览器兼容性

{{Compat("css.properties.appearance")}}

{{Compat("css.properties.appearance")}}

示例

以下代码将使一个元素在 Firefox 中看起来像工具栏按钮：

.exampleone {
  -moz-appearance: toolbarbutton;
}

可参考 这个 JSFiddle 示例，它演示了应如何使用 appearance: none 已对单选框与复选框应用自定义样式。

参见