在基于 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.

取值

Value	Demo	Browser	Description
`none`	div {-moz-appearance: none; -webkit-appearance: none; color: black;} <div>Lorem</div> {{EmbedLiveSample("sampleNone",100,50,"","", "nobutton")}}	All	不应用任何特殊样式。这是未定义元素的默认值。旧版翻译中的信息：但是，有这两个BUG： {{bug(649849)}} 和 {{bug(605985)}}。
`button`	div {-moz-appearance: button; -webkit-appearance: button; color: black; } <div>Lorem</div> {{EmbedLiveSample("sampleButton",100,50,"","", "nobutton")}}	Firefox Chrome	此元素将被作为按钮来绘制。
`button-arrow-down`	div {-moz-appearance: button-arrow-down; -webkit-appearance: button-arrow-down; color: black; } <div>Lorem</div> {{EmbedLiveSample("sampleButtonArrowDown",100,50,"","", "nobutton")}}	Firefox
`button-arrow-next`	div {-moz-appearance: button-arrow-next; -webkit-appearance: button-arrow-next; color: black; } <div>Lorem</div> {{EmbedLiveSample("sampleButtonArrowNext",100,50,"","", "nobutton")}}	Firefox
`button-arrow-previous`	div {-moz-appearance: button-arrow-previous; -webkit-appearance: button-arrow-previous; color: black; } <div>Lorem</div> {{EmbedLiveSample("sampleButtonArrowPrevious",100,50,"","", "nobutton")}}	Firefox
`button-arrow-up`	div {-moz-appearance: button-arrow-up; -webkit-appearance: button-arrow-up; color: black; } <div>Lorem</div> {{EmbedLiveSample("sampleButtonArrowUp",100,50,"","", "nobutton")}}	Firefox
`button-bevel`	div {-moz-appearance: button-bevel; -webkit-appearance: button-bevel; color: black; } <div>Lorem</div> {{EmbedLiveSample("sampleButtonBevel",100,50,"","", "nobutton")}}	Firefox Chrome

`button-focus`	div {-moz-appearance: button-focus; -webkit-appearance: button-focus; color: black; } <div>Lorem</div> {{EmbedLiveSample("sampleButtonFocus",100,50,"","", "nobutton")}}	Firefox
`caret`	div {-moz-appearance: caret; -webkit-appearance: caret; color: black; } <div>Lorem</div> {{EmbedLiveSample("sampleCaret",100,50,"","", "nobutton")}}	Firefox Chrome
`checkbox`	div {-moz-appearance: checkbox; -webkit-appearance: checkbox; color: black; } <div>Lorem</div> {{EmbedLiveSample("sampleCheckbox",100,50,"","", "nobutton")}}	Firefox Chrome	此元素将被作为复选框绘制，仅包括实际的 "checkbox" 部分。
`checkbox-container`	div {-moz-appearance: checkbox-container; -webkit-appearance: checkbox-container; color: black; } <div>Lorem</div> {{EmbedLiveSample("sampleCheckboxContainer",100,50,"","", "nobutton")}}	Firefox	此元素将被作为复选框容器绘制，可在相应的平台下带有高亮样式。一般情况下，它会包含一个标签（label）与一个复选框。
`checkbox-label`	div {-moz-appearance: checkbox-label; -webkit-appearance: checkbox-label; color: black; } <div>Lorem</div> {{EmbedLiveSample("sampleCheckboxLabel",100,50,"","", "nobutton")}}	Firefox
`checkmenuitem`	div {-moz-appearance: checkmenuitem; -webkit-appearance: checkmenuitem; height: 20px; color: black; } <div>Lorem</div> {{EmbedLiveSample("sampleCheckmenuitem",100,50,"","", "nobutton")}}	Firefox
`dualbutton`	div {-moz-appearance: dualbutton; -webkit-appearance: dualbutton; color: black; } <div>Lorem</div> {{EmbedLiveSample("sampleDualButton",100,50,"","", "nobutton")}}	Firefox
`groupbox`	div {-moz-appearance: groupbox; -webkit-appearance: groupbox; color: black; } <div>Lorem</div> {{EmbedLiveSample("sampleGroupbox",100,50,"","", "nobutton")}}	Firefox
`inner-spin-button`		Chrome
`listbox`	div {-moz-appearance: listbox; -webkit-appearance: listbox; height:20px; color: black; } <div>Lorem</div> {{EmbedLiveSample("sampleListBox",100,50,"","", "nobutton")}}	Firefox Chrome
`listitem`	div {-moz-appearance: listitem; -webkit-appearance: listitem; color: black; } <div>Lorem</div> {{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`	div {-moz-appearance: menuarrow; -webkit-appearance: menuarrow; color: black; } <div>Lorem</div> {{EmbedLiveSample("sampleMenuArrow",100,50,"","", "nobutton")}}	Firefox
`menubar`	div {-moz-appearance: menubar; -webkit-appearance: menubar; color: balck; } <div>Lorem</div> {{EmbedLiveSample("sampleMenubar",100,50,"","", "nobutton")}}	Firefox
`menucheckbox`	div {-moz-appearance: menucheckbox; -webkit-appearance: menucheckbox; color: black; } <div>Lorem</div> {{EmbedLiveSample("sampleMenuCheckbox",100,50,"","", "nobutton")}}	Firefox
`menuimage`	div {-moz-appearance: menuimage; -webkit-appearance: menuimage; color: black; } <div>Lorem</div> {{EmbedLiveSample("sampleMenuImage",100,50,"","", "nobutton")}}	Firefox
`menuitem`	div {-moz-appearance: menuitem; -webkit-appearance: menuitem; color: black; } <div>Lorem</div> {{EmbedLiveSample("sampleMenuItem",100,50,"","", "nobutton")}}	Firefox	此元素将被作为菜单项绘制，鼠标覆盖时会带有高亮效果。
`menuitemtext`	div {-moz-appearance: menuitemtext; -webkit-appearance: menuitemtext; color: black; } <div>Lorem</div> {{EmbedLiveSample("sampleMenuItemText",100,50,"","", "nobutton")}}	Firefox
`menulist`	div {-moz-appearance: menulist; -webkit-appearance: menulist; color: black; } <div>Lorem</div> {{EmbedLiveSample("sampleMenuList",100,50,"","", "nobutton")}}	Firefox Chrome
`menulist-button`		`menulist-button`	div {-moz-appearance: menulist-button; -webkit-appearance: menulist-button; color: black; } <div>Lorem</div> {{EmbedLiveSample("sampleMenuListButton",100,50,"","", "nobutton")}}	Firefox Chrome	此元素将被绘制为显示一个下拉菜单可以打开的按钮。
`menulist-text`	div {-moz-appearance: menulist-text; -webkit-appearance: menulist-text; color: black; } <div>Lorem</div> {{EmbedLiveSample("sampleMenuListText",100,50,"","", "nobutton")}}	Firefox Chrome
`menulist-textfield`	div {-moz-appearance: menulist-textfield; -webkit-appearance: menulist-textfield; color: black; } <div>Lorem</div> {{EmbedLiveSample("sampleMenuListTextfield",100,50,"","", "nobutton")}}	Firefox Chrome	这个元素将被作为菜单列表中的文本框绘制。（未在 Windows 平台下实现）	`menupopup`	div {-moz-appearance: menupopup; -webkit-appearance: menupopup; color: black; } <div>Lorem</div> {{EmbedLiveSample("sampleMenuPopup",100,50,"","", "nobutton")}}	Firefox
`menuradio`	div {-moz-appearance: menuradio; -webkit-appearance: menuradio; color: black; } <div>Lorem</div> {{EmbedLiveSample("sampleMenuRadio",100,50,"","", "nobutton")}}	Firefox
`menuseparator`	div {-moz-appearance: menuseparator; -webkit-appearance: menuseparator; color: transparent; } <div>Lorem</div> {{EmbedLiveSample("sampleMenuSeparator",100,50,"","", "nobutton")}}	Firefox
`meter`		Chrome
`meterbar`	div {-moz-appearance: meterbar; -webkit-appearance: meterbar; color: black; } <div>Lorem</div> {{EmbedLiveSample("sampleMeterbar",100,50,"","", "nobutton")}}	Firefox	New in Fx 16.
`meterchunk`	div {-moz-appearance: meterchunk; -webkit-appearance: meterchunk; color: black; } <div>Lorem</div> {{EmbedLiveSample("sampleMeterchunk",100,50,"","", "nobutton")}}	Firefox	New in Fx 16
`progress-bar`		Chrome
`progress-bar-value`		Chrome
`progressbar`	div {-moz-appearance: progressbar; -webkit-appearance: progressbar; color: black; } <div>Lorem</div> {{EmbedLiveSample("sampleProgressBar",100,50,"","", "nobutton")}}	Firefox	The element is styled like a progress bar.
`progressbar-vertical`	div {-moz-appearance: progressbar-vertical; -webkit-appearance: preogressbar-vertical; color: transparent; } <div>Lorem</div> {{EmbedLiveSample("sampleProgressBarVertical",100,50,"","", "nobutton")}}	Firefox
`progresschunk`	div {-moz-appearance: progresschunk; -webkit-appearance: progresschunk; color: black; } <div>Lorem</div> {{EmbedLiveSample("sampleProgressChunk",100,50,"","", "nobutton")}}	Firefox
`progresschunk-vertical`	div {-moz-appearance: progresschunk-vertical; -webkit-appearance: progresschunk-vertical; color: black; } <div>Lorem</div> {{EmbedLiveSample("sampleProgressChunkVertical",100,50,"","", "nobutton")}}	Firefox
`push-button`		Chrome
`radio`	div {-moz-appearance: radio; -webkit-appearance: radio; color: black; } <div>Lorem</div> {{EmbedLiveSample("sampleRadio",100,50,"","", "nobutton")}}	Firefox Chrome	这个元素将被作为单选框绘制，仅包括实际的"radio button"部分。
`radio-container`	div {-moz-appearance: radio-container; -webkit-appearance: radio-container; color: black; } <div>Lorem</div> {{EmbedLiveSample("sampleRadioContainer",100,50,"","", "nobutton")}}	Firefox	这个元素将被作为单选框容器绘制，并且可在相应平台下带有高亮样式。一般情况下，它会包含一个标签（label）与一个单选框。
`radio-label`	div {-moz-appearance: radio-label; -webkit-appearance: radio-label; color: black; } <div>Lorem</div> {{EmbedLiveSample("sampleRadioLabel",100,50,"","", "nobutton")}}	Firefox
`radiomenuitem`	div {-moz-appearance: radiomenuitem; -webkit-appearance: radiomenuitem; color: black; } <div>Lorem</div> {{EmbedLiveSample("sampleRadioMenuItem",100,50,"","", "nobutton")}}	Firefox
range	div {-moz-appearance: range; -webkit-appearance: radiomenuitem; color: black; } range <div>Lorem</div> {{EmbedLiveSample("sampleRange",100,50,"","", "nobutton")}}	Firefox
range-thumb	div {-moz-appearance: range-thumb; -webkit-appearance: range-thumb; color: black; } <div>Lorem</div> {{EmbedLiveSample("sampleRangeThumb",100,50,"","", "nobutton")}}	Firefox
`resizer`	div {-moz-appearance: resizer; -webkit-appearance: resizer; color: transparent; } <div>Lorem</div> {{EmbedLiveSample("sampleResizer",100,50,"","", "nobutton")}}	Firefox
`resizerpanel`	div {-moz-appearance: resizerpanel; -webkit-appearance: resizerpanel; color: black; } <div>Lorem</div> {{EmbedLiveSample("sampleResizerPanel",100,50,"","", "nobutton")}}	Firefox
`scale-horizontal`	div {-moz-appearance: scale-horizontal; -webkit-appearance: scale-horizontal; color: transparent; } <div>Lorem</div> {{EmbedLiveSample("sampleScaleHorizontal",100,50,"","", "nobutton")}}	Firefox
`scalethumbend`	div {-moz-appearance: scalethumbend; -webkit-appearance: scalethumbend; color: black; } <div>Lorem</div> {{EmbedLiveSample("sampleThumbEnd",100,50,"","", "nobutton")}}	Firefox
`scalethumb-horizontal`	div {-moz-appearance: scalethumb-horizontal; -webkit-appearance: scalethumb-horizontal; color: transparent; } <div>Lorem</div> {{EmbedLiveSample("sampleScaleThumbHorizontal",100,50,"","", "nobutton")}}	Firefox
`scalethumbstart`	div {-moz-appearance: scalethumbstart; -webkit-appearance: scalethumbstart; color: black; } <div>Lorem</div> {{EmbedLiveSample("sampleScaleThumbStart",100,50,"","", "nobutton")}}	Firefox
`scalethumbtick`	div {-moz-appearance: scalethumbtick; -webkit-appearance: scalethumbtick; color: black; } <div>Lorem</div> {{EmbedLiveSample("sampleScaleThumbTick",100,50,"","", "nobutton")}}	Firefox
`scalethumb-vertical`	div {-moz-appearance: scalethumb-vertical; -webkit-appearance: scalethumb-vertical; color: black; } <div>Lorem</div> {{EmbedLiveSample("sampleScaleThumbVertical",100,50,"","", "nobutton")}}	Firefox
`scale-vertical`	div {-moz-appearance: scale-vertical; -webkit-appearance: scale-vertical; color: transparent; } <div>Lorem</div> {{EmbedLiveSample("sampleScaleVertical",100,50,"","", "nobutton")}}	Firefox
`scrollbarbutton-down`	div {-moz-appearance: scrollbarbutton-down; -webkit-appearance: scrollbarbutton-down; color: black; } <div>Lorem</div> {{EmbedLiveSample("sampleScrollbarButtonDown",100,50,"","", "nobutton")}}	Firefox
`scrollbarbutton-left`	div {-moz-appearance: scrollbarbutton-left; -webkit-appearance: scrollbarbutton-left; color: black; } <div>Lorem</div> {{EmbedLiveSample("sampleScrollbarButtonLeft",100,50,"","", "nobutton")}}	Firefox
`scrollbarbutton-right`	div {-moz-appearance: scrollbarbutton-right; -webkit-appearance: scrollbarbutton-right; color: black; } <div>Lorem</div> {{EmbedLiveSample("sampleScrollbarButtonRight",100,50,"","", "nobutton")}}	Firefox
`scrollbarbutton-up`	div {-moz-appearance: scrollbarbutton-up; -webkit-appearance: scrollbarbutton-up; color: black; } <div>Lorem</div> {{EmbedLiveSample("sampleScrollbarButtonUp",100,50,"","", "nobutton")}}	Firefox
`scrollbarthumb-horizontal`	div {-moz-appearance: scrollbarthumb-horizontal; -webkit-appearance: scrollbarthumb-horizontal; color: black; } <div>Lorem</div> {{EmbedLiveSample("sampleScrollbarThumbHorizontal",100,50,"","", "nobutton")}}	Firefox
`scrollbarthumb-vertical`	div {-moz-appearance: scrollbarthumb-vertical; -webkit-appearance: scrollbarthumb-vertical; color: black; } <div>Lorem</div> {{EmbedLiveSample("sampleScrollbarThumbVertical",100,50,"","", "nobutton")}}	Firefox
`scrollbartrack-horizontal`	div {-moz-appearance: scrollbartrack-horizontal; -webkit-appearance: scrollbartrack-horizontal; color: black; } <div>Lorem</div> {{EmbedLiveSample("sampleScrollbarTrackHorizontal",100,50,"","", "nobutton")}}	Firefox
`scrollbartrack-vertical`	div {-moz-appearance: scrollbartrack-vertical; -webkit-appearance: scrollbarbartrack-vertical; color: black; } <div>Lorem</div> {{EmbedLiveSample("sampleScrollbarTrackVertical",100,50,"","", "nobutton")}}	Firefox
`searchfield`	div {-moz-appearance: searchfield; -webkit-appearance: searchfield; color: black; } <div>Lorem</div> {{EmbedLiveSample("sampleSearchField",100,50,"","", "nobutton")}}	Firefox Chrome
`searchfield-cancel-button`		Chrome
`separator`	div {-moz-appearance: separator; -webkit-appearance: separator; color: transparent; } <div>Lorem</div> {{EmbedLiveSample("sampleSeparator",100,50,"","", "nobutton")}}	Firefox
`sheet`	div {-moz-appearance: sheet; -webkit-appearance: sheet; color: black; } <div>Lorem</div> {{EmbedLiveSample("sampleSheet",100,50,"","", "nobutton")}}	Firefox
`slider-horizontal`		Chrome
`slider-vertical`		Chrome
`sliderthumb-horizontal`		Chrome
`sliderthumb-vertical`		Chrome
`spinner`	div {-moz-appearance: spinner; -webkit-appearance: spinner; color: transparent; } <div>Lorem</div> {{EmbedLiveSample("sampleSpinner",100,50,"","", "nobutton")}}	Firefox
`spinner-downbutton`	div {-moz-appearance: spinner-downbutton; -webkit-appearance: spinner-downbutton; color: black; } <div>Lorem</div> {{EmbedLiveSample("sampleSpinnerDownbutton",100,50,"","", "nobutton")}}	Firefox
`spinner-textfield`	div {-moz-appearance: spinner-textfield; -webkit-appearance: spinner-textfield; color: black; } <div>Lorem</div> {{EmbedLiveSample("sampleSpinnerTextfield",100,50,"","", "nobutton")}}	Firefox
`spinner-upbutton`	div {-moz-appearance: spinner-upbutton; -webkit-appearance: spinner-upbutton; color: black; } <div>Lorem</div> {{EmbedLiveSample("sampleSpinnerUpbutton",100,50,"","", "nobutton")}}	Firefox
`splitter`	div {-moz-appearance: splitter; -webkit-appearance: splitter; color: transparent; } <div>Lorem</div> {{EmbedLiveSample("sampleSplitter",100,50,"","", "nobutton")}}	Firefox
`square-button`		Chrome
`statusbar`	div {-moz-appearance: statusbar; -webkit-appearance: statusbar; color: black; } <div>Lorem</div> {{EmbedLiveSample("sampleStatusBar",100,50,"","", "nobutton")}}	Firefox
`statusbarpanel`	div {-moz-appearance: statusbarpanel; -webkit-appearance: statusbarpanel; color: black; } <div>Lorem</div> {{EmbedLiveSample("sampleStatusBarPanel",100,50,"","", "nobutton")}}	Firefox
`tab`	div {-moz-appearance: tab; -webkit-appearance: tab; height: 20px; color: black; } <div>Lorem</div> {{EmbedLiveSample("sampleTab",100,50,"","", "nobutton")}}	Firefox
`tabpanel`	div {-moz-appearance: tabpanel; -webkit-appearance: tabpanel; color: black; } <div>Lorem</div> {{EmbedLiveSample("sampleTabPanel",100,50,"","", "nobutton")}}	Firefox
`tabpanels`	div {-moz-appearance: tabpanels; -webkit-appearance: tabpanels; color: black; } <div>Lorem</div> {{EmbedLiveSample("sampleTabPanels",100,50,"","", "nobutton")}}	Firefox
`tab-scroll-arrow-back`	div {-moz-appearance: tab-scroll-arrow-back; -webkit-appearance: tab-scroll-arrow-back; color: black; } <div>Lorem</div> {{EmbedLiveSample("sampleTabScrollArrowBack",100,50,"","", "nobutton")}}	Firefox
`tab-scroll-arrow-forward`	div {-moz-appearance: tab-scroll-arrow-forward; -webkit-appearance: tab-scroll-arrow-forward; color: black; } <div>Lorem</div> {{EmbedLiveSample("sampleTabScrollArrowForward",100,50,"","", "nobutton")}}	Firefox
`textarea`		Chrome
`textfield`	div {-moz-appearance: textfield; -webkit-appearance: textfield; color: black; } <div>Lorem</div> {{EmbedLiveSample("sampleTextField",100,50,"","", "nobutton")}}	Firefox Chrome
`textfield-multiline`	div {-moz-appearance: textfield-multiline; -webkit-appearance: textfield-multiline; color: black; } <div>Lorem</div> {{EmbedLiveSample("sampleTextfieldMultiline",100,50,"","", "nobutton")}}	Firefox
`toolbar`	div {-moz-appearance: toolbar; -webkit-appearance: toolbar; color: black; } <div>Lorem</div> {{EmbedLiveSample("sampleToolbar",100,50,"","", "nobutton")}}	Firefox
`toolbarbutton`	div {-moz-appearance: toolbarbutton; -webkit-appearance: toolbarbutton; color: black; } <div>Lorem</div> {{EmbedLiveSample("sampleToolbarButton",100,50,"","", "nobutton")}}	Firefox
`toolbarbutton-dropdown`	div {-moz-appearance: toolbarbutton-dropdown; -webkit-appearance: toolbarbutton-dropdown; color: black; } <div>Lorem</div> {{EmbedLiveSample("sampleToolbarButtonDropdown",100,50,"","", "nobutton")}}	Firefox
`toolbargripper`	div {-moz-appearance: toolbargripper; -webkit-appearance: toolbargripper; color: black; } <div>Lorem</div> {{EmbedLiveSample("sampleToolbarGripper",100,50,"","", "nobutton")}}	Firefox
`toolbox`	div {-moz-appearance: toolbox; -webkit-appearance: toolbox; color: black; } <div>Lorem</div> {{EmbedLiveSample("sampleToolbox",100,50,"","", "nobutton")}}	Firefox
`tooltip`	div {-moz-appearance: tooltip; -webkit-appearance: tooltip; color: black; } <div>Lorem</div> {{EmbedLiveSample("sampleTooltip",100,50,"","", "nobutton")}}	Firefox
`treeheader`	div {-moz-appearance: treeheader; -webkit-appearance: treeheader; color: black; } <div>Lorem</div> {{EmbedLiveSample("sampleTreeHeader",100,50,"","", "nobutton")}}	Firefox
`treeheadercell`	div {-moz-appearance: treeheadercell; -webkit-appearance: treeheadercell; height:20px; color: black; } <div>Lorem</div> {{EmbedLiveSample("sampleTreeHeaderCell",100,50,"","", "nobutton")}}	Firefox
`treeheadersortarrow`	div {-moz-appearance: treeheadersortarrow; -webkit-appearance: treeheadersortarrow; color: black; } <div>Lorem</div> {{EmbedLiveSample("sampleTreeHeaderSortArrow",100,50,"","", "nobutton")}}	Firefox
`treeitem`	div {-moz-appearance: treeitem; -webkit-appearance: treeitem; color: black; } <div>Lorem</div> {{EmbedLiveSample("sampleTreeItem",100,50,"","", "nobutton")}}	Firefox
`treeline`	div {-moz-appearance: treeline; -webkit-appearance: treeline; color: black; } <div>Lorem</div> {{EmbedLiveSample("sampleTreeLine",100,50,"","", "nobutton")}}	Firefox
`treetwisty`	div {-moz-appearance: treetwisty; -webkit-appearance: treetwisty; color: transparent; } <div>Lorem</div> {{EmbedLiveSample("sampleTreeTwisty",100,50,"","", "nobutton")}}	Firefox
`treetwistyopen`	div {-moz-appearance: treetwistyopen; -webkit-appearance: treetwistyopen; color: transparent; } <div>Lorem</div> {{EmbedLiveSample("sampleTreeTwistyOpen",100,50,"","", "nobutton")}}	Firefox
`treeview`	div {-moz-appearance: treeview; -webkit-appearance: treeview; color: black; } <div>Lorem</div> {{EmbedLiveSample("sampleTreeView",100,50,"","", "nobutton")}}	Firefox
{{gecko_minversion_inline("2.0")}} `-moz-win-borderless-glass`	div {-moz-appearance: -moz-win-borderless-glass; color: black; } <div>Lorem</div> {{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`	div {-moz-appearance: -moz-win-browsertabbar-toolbox; color: black; } <div>Lorem</div> {{EmbedLiveSample("sampleWinBrowsertabbarToolbox",100,50,"","", "nobutton")}}	Firefox	仅支持 Vista 及更高版本的 Windows 系统。这个样式会将磨砂玻璃（Aero Glass）样式（但是不含边框）应用到元素上。
`-moz-win-browsertabbar-toolbox`	div {-moz-appearance: -moz-win-browsertabbar-toolbox; color: black; } <div>Lorem</div> {{EmbedLiveSample("sampleWinBrowsertabbarToolbox",100,50,"","", "nobutton")}}	Firefox	仅支持 Vista 及更高版本的 Windows 系统。此工具栏样式主要被用于浏览器的标签栏。
`-moz-win-communicationstext`	div {-moz-appearance: -moz-win-communicationstext; color: black; } <div>Lorem</div> {{EmbedLiveSample("sampleWinCommunicationstext",100,50,"","", "nobutton")}}	Firefox
`-moz-win-communications-toolbox`	div {-moz-appearance: -moz-win-communications-toolbox; color: black; } <div>Lorem</div> {{EmbedLiveSample("sampleWinCommunicationsToolbox",100,50,"","", "nobutton")}}	Firefox	仅支持 Vista 及更高版本的 Windows 系统。此工具栏样式是为了用于通讯和生产方面的应用程序，与之对应的前景色为 `-moz-win-communicationstext`。
{{gecko_minversion_inline("6.0")}} `-moz-win-exclude-glass`	div {-moz-appearance: -moz-win-exclude-glass; color: black; } <div>Lorem</div> {{EmbedLiveSample("sampleWinExcludeGlass",100,50,"","", "nobutton")}}	Firefox	仅支持 Vista 及更高版本的 Windows 系统。此样式被用于取消元素的磨砂玻璃效果。
`-moz-win-glass`	div {-moz-appearance: -moz-win-glass; color: black; } <div>Lorem</div> {{EmbedLiveSample("sampleWinGlass",100,50,"","", "nobutton")}}	Firefox	仅支持 Vista 及更高版本的 Windows 系统。这个样式会将磨砂玻璃（Aero Glass）样式（但是不含边框）应用到元素上。
`-moz-win-mediatext`	div {-moz-appearance: -moz-win-mediatext; color: black; } <div>Lorem</div> {{EmbedLiveSample("sampleWinMediaText",100,50,"","", "nobutton")}}	Firefox

`-moz-win-media-toolbox`	div {-moz-appearance: -moz-win-media-toolbox; color: black; } <div>Lorem</div> {{EmbedLiveSample("sampleWinMediaToolbox",100,50,"","", "nobutton")}}	Firefox	仅支持 Vista 及更高版本的 Windows 系统。此工具栏样式主要用于管理媒体对象。与之对应的前景色为 `-moz-win-mediatext`。
`-moz-window-button-box`	div {-moz-appearance: -moz-window-button-box; color: black; } <div>Lorem</div> {{EmbedLiveSample("sampleWindowButtonBox",100,50,"","", "nobutton")}}	Firefox
`-moz-window-button-box-maximized`	div {-moz-appearance: -moz-window-button-box-maximized; color: black; } <div>Lorem</div> {{EmbedLiveSample("sampleWindowButtonBoxMaximized",100,50,"","", "nobutton")}}	Firefox
`-moz-window-button-close`	div {-moz-appearance: -moz-window-button-close; color: black; } <div>Lorem</div> {{EmbedLiveSample("sampleWindowButtonClose",100,50,"","", "nobutton")}}	Firefox
`-moz-window-button-maximize`	div {-moz-appearance: -moz-window-button-maximize; color: black; } <div>Lorem</div> {{EmbedLiveSample("sampleWindowButtonMaximize",100,50,"","", "nobutton")}}	Firefox
`-moz-window-button-minimize`	div {-moz-appearance: -moz-window-button-minimize; color: black; } <div>Lorem</div> {{EmbedLiveSample("sampleWindowButtonMinimize",100,50,"","", "nobutton")}}	Firefox
`-moz-window-button-restore`	div {-moz-appearance: -moz-window-button-restore; color: black; } <div>Lorem</div> {{EmbedLiveSample("sampleWindowButtonRestore",100,50,"","", "nobutton")}}	Firefox
`-moz-window-frame-bottom`	div {-moz-appearance: -moz-window-frame-bottom; color: black; } <div>Lorem</div> {{EmbedLiveSample("sampleWindowFrameBottom",100,50,"","", "nobutton")}}	Firefox
`-moz-window-frame-left`	div {-moz-appearance: -moz-window-frame-left; color: black; } <div>Lorem</div> {{EmbedLiveSample("sampleWindowFrameLeft",100,50,"","", "nobutton")}}	Firefox
`-moz-window-frame-right`	div {-moz-appearance: -moz-window-frame-right; color: black; } <div>Lorem</div> {{EmbedLiveSample("sampleWindowFrameRight",100,50,"","", "nobutton")}}	Firefox
`-moz-window-titlebar`	div {-moz-appearance: -moz-window-titlebar; color: black; } <div>Lorem</div> {{EmbedLiveSample("sampleWindowTitlebar",100,50,"","", "nobutton")}}	Firefox
`-moz-window-titlebar-maximized`	div {-moz-appearance: -moz-window-titlebar-maximized; color: black; } <div>Lorem</div> {{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

Value

Demo

Browser

Description

none

 div {-moz-appearance: none; -webkit-appearance: none; color: black;}

          <div>Lorem</div>

All

不应用任何特殊样式。这是未定义元素的默认值。旧版翻译中的信息：但是，有这两个BUG： {{bug(649849)}} 和 {{bug(605985)}}。

button

 div {-moz-appearance: button; -webkit-appearance: button; color: black; }

          <div>Lorem</div>

Firefox Chrome

此元素将被作为按钮来绘制。

button-arrow-down

 div {-moz-appearance: button-arrow-down; -webkit-appearance: button-arrow-down; color: black; }

          <div>Lorem</div>

{{EmbedLiveSample("sampleButtonArrowDown",100,50,"","", "nobutton")}}

Firefox

button-arrow-next

 div {-moz-appearance: button-arrow-next; -webkit-appearance: button-arrow-next; color: black; }

          <div>Lorem</div>

{{EmbedLiveSample("sampleButtonArrowNext",100,50,"","", "nobutton")}}

Firefox

button-arrow-previous

 div {-moz-appearance: button-arrow-previous; -webkit-appearance: button-arrow-previous; color: black; }

          <div>Lorem</div>

{{EmbedLiveSample("sampleButtonArrowPrevious",100,50,"","", "nobutton")}}

Firefox

button-arrow-up

 div {-moz-appearance: button-arrow-up; -webkit-appearance: button-arrow-up; color: black; }

          <div>Lorem</div>

{{EmbedLiveSample("sampleButtonArrowUp",100,50,"","", "nobutton")}}

Firefox

button-bevel

 div {-moz-appearance: button-bevel; -webkit-appearance: button-bevel; color: black; }

          <div>Lorem</div>

{{EmbedLiveSample("sampleButtonBevel",100,50,"","", "nobutton")}}

Firefox Chrome

button-focus

 div {-moz-appearance: button-focus; -webkit-appearance: button-focus; color: black; }

          <div>Lorem</div>

{{EmbedLiveSample("sampleButtonFocus",100,50,"","", "nobutton")}}

Firefox

caret

 div {-moz-appearance: caret; -webkit-appearance: caret; color: black; }

          <div>Lorem</div>

Firefox Chrome

checkbox

 div {-moz-appearance: checkbox; -webkit-appearance: checkbox; color: black; }

          <div>Lorem</div>

Firefox Chrome

此元素将被作为复选框绘制，仅包括实际的 "checkbox" 部分。

checkbox-container

 div {-moz-appearance: checkbox-container; -webkit-appearance: checkbox-container; color: black; }

          <div>Lorem</div>

{{EmbedLiveSample("sampleCheckboxContainer",100,50,"","", "nobutton")}}

Firefox

此元素将被作为复选框容器绘制，可在相应的平台下带有高亮样式。一般情况下，它会包含一个标签（label）与一个复选框。

checkbox-label

 div {-moz-appearance: checkbox-label; -webkit-appearance: checkbox-label; color: black; }

          <div>Lorem</div>

{{EmbedLiveSample("sampleCheckboxLabel",100,50,"","", "nobutton")}}

Firefox

checkmenuitem

 div {-moz-appearance: checkmenuitem; -webkit-appearance: checkmenuitem; height: 20px; color: black; }

          <div>Lorem</div>

{{EmbedLiveSample("sampleCheckmenuitem",100,50,"","", "nobutton")}}

Firefox

dualbutton

 div {-moz-appearance: dualbutton; -webkit-appearance: dualbutton; color: black; }

          <div>Lorem</div>

Firefox

groupbox

 div {-moz-appearance: groupbox; -webkit-appearance: groupbox; color: black; }

          <div>Lorem</div>

Firefox

inner-spin-button

Chrome

listbox

 div {-moz-appearance: listbox; -webkit-appearance: listbox; height:20px; color: black; }

          <div>Lorem</div>

Firefox Chrome

listitem

 div {-moz-appearance: listitem; -webkit-appearance: listitem; color: black; }

          <div>Lorem</div>

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

 div {-moz-appearance: menuarrow; -webkit-appearance: menuarrow; color: black; }

          <div>Lorem</div>

Firefox

menubar

 div {-moz-appearance: menubar; -webkit-appearance: menubar; color: balck; }

          <div>Lorem</div>

Firefox

menucheckbox

 div {-moz-appearance: menucheckbox; -webkit-appearance: menucheckbox; color: black; }

          <div>Lorem</div>

{{EmbedLiveSample("sampleMenuCheckbox",100,50,"","", "nobutton")}}

Firefox

menuimage

 div {-moz-appearance: menuimage; -webkit-appearance: menuimage; color: black; }

          <div>Lorem</div>

Firefox

menuitem

 div {-moz-appearance: menuitem; -webkit-appearance: menuitem; color: black; }

          <div>Lorem</div>

Firefox

此元素将被作为菜单项绘制，鼠标覆盖时会带有高亮效果。

menuitemtext

 div {-moz-appearance: menuitemtext; -webkit-appearance: menuitemtext; color: black; }

          <div>Lorem</div>

{{EmbedLiveSample("sampleMenuItemText",100,50,"","", "nobutton")}}

Firefox

menulist

 div {-moz-appearance: menulist; -webkit-appearance: menulist; color: black; }

          <div>Lorem</div>

Firefox Chrome

menulist-button

 div {-moz-appearance: menulist-button; -webkit-appearance: menulist-button; color: black; }

          <div>Lorem</div>

{{EmbedLiveSample("sampleMenuListButton",100,50,"","", "nobutton")}}

Firefox Chrome

此元素将被绘制为显示一个下拉菜单可以打开的按钮。

menulist-text

 div {-moz-appearance: menulist-text; -webkit-appearance: menulist-text; color: black; }

          <div>Lorem</div>

{{EmbedLiveSample("sampleMenuListText",100,50,"","", "nobutton")}}

Firefox Chrome

menulist-textfield

 div {-moz-appearance: menulist-textfield; -webkit-appearance: menulist-textfield; color: black; }

          <div>Lorem</div>

{{EmbedLiveSample("sampleMenuListTextfield",100,50,"","", "nobutton")}}

Firefox Chrome

这个元素将被作为菜单列表中的文本框绘制。（未在 Windows 平台下实现）

menupopup

 div {-moz-appearance: menupopup; -webkit-appearance: menupopup; color: black; }

          <div>Lorem</div>

Firefox

menuradio

 div {-moz-appearance: menuradio; -webkit-appearance: menuradio; color: black; }

          <div>Lorem</div>

Firefox

menuseparator

 div {-moz-appearance: menuseparator; -webkit-appearance: menuseparator; color: transparent; }

          <div>Lorem</div>

{{EmbedLiveSample("sampleMenuSeparator",100,50,"","", "nobutton")}}

Firefox

meter

Chrome

meterbar

 div {-moz-appearance: meterbar; -webkit-appearance: meterbar; color: black; }

          <div>Lorem</div>

Firefox

New in Fx 16.

meterchunk

 div {-moz-appearance: meterchunk; -webkit-appearance: meterchunk; color: black; }

          <div>Lorem</div>

Firefox

New in Fx 16

progress-bar

Chrome

progress-bar-value

Chrome

progressbar

 div {-moz-appearance: progressbar; -webkit-appearance: progressbar; color: black; }

          <div>Lorem</div>

{{EmbedLiveSample("sampleProgressBar",100,50,"","", "nobutton")}}

Firefox

The element is styled like a progress bar.

progressbar-vertical

 div {-moz-appearance: progressbar-vertical; -webkit-appearance: preogressbar-vertical; color: transparent; }

          <div>Lorem</div>

{{EmbedLiveSample("sampleProgressBarVertical",100,50,"","", "nobutton")}}

Firefox

progresschunk

 div {-moz-appearance: progresschunk; -webkit-appearance: progresschunk; color: black; }

          <div>Lorem</div>

{{EmbedLiveSample("sampleProgressChunk",100,50,"","", "nobutton")}}

Firefox

progresschunk-vertical

 div {-moz-appearance: progresschunk-vertical; -webkit-appearance: progresschunk-vertical; color: black; }

          <div>Lorem</div>

{{EmbedLiveSample("sampleProgressChunkVertical",100,50,"","", "nobutton")}}

Firefox

push-button

Chrome

radio

 div {-moz-appearance: radio; -webkit-appearance: radio; color: black; }

          <div>Lorem</div>

Firefox Chrome

这个元素将被作为单选框绘制，仅包括实际的"radio button"部分。

radio-container

 div {-moz-appearance: radio-container; -webkit-appearance: radio-container; color: black; }

          <div>Lorem</div>

{{EmbedLiveSample("sampleRadioContainer",100,50,"","", "nobutton")}}

Firefox

这个元素将被作为单选框容器绘制，并且可在相应平台下带有高亮样式。一般情况下，它会包含一个标签（label）与一个单选框。

radio-label

 div {-moz-appearance: radio-label; -webkit-appearance: radio-label; color: black; }

          <div>Lorem</div>

Firefox

radiomenuitem

 div {-moz-appearance: radiomenuitem; -webkit-appearance: radiomenuitem; color: black; }

          <div>Lorem</div>

{{EmbedLiveSample("sampleRadioMenuItem",100,50,"","", "nobutton")}}

Firefox

range

 div {-moz-appearance: range; -webkit-appearance: radiomenuitem; color: black; }

range

          <div>Lorem</div>

Firefox

range-thumb

 div {-moz-appearance: range-thumb; -webkit-appearance: range-thumb; color: black; }

          <div>Lorem</div>

Firefox

resizer

 div {-moz-appearance: resizer; -webkit-appearance: resizer; color: transparent; }

          <div>Lorem</div>

Firefox

resizerpanel

 div {-moz-appearance: resizerpanel; -webkit-appearance: resizerpanel; color: black; }

          <div>Lorem</div>

{{EmbedLiveSample("sampleResizerPanel",100,50,"","", "nobutton")}}

Firefox

scale-horizontal

 div {-moz-appearance: scale-horizontal; -webkit-appearance: scale-horizontal; color: transparent; }

          <div>Lorem</div>

{{EmbedLiveSample("sampleScaleHorizontal",100,50,"","", "nobutton")}}

Firefox

scalethumbend

 div {-moz-appearance: scalethumbend; -webkit-appearance: scalethumbend; color: black; }

          <div>Lorem</div>

Firefox

scalethumb-horizontal

 div {-moz-appearance: scalethumb-horizontal; -webkit-appearance: scalethumb-horizontal; color: transparent; }

          <div>Lorem</div>

{{EmbedLiveSample("sampleScaleThumbHorizontal",100,50,"","", "nobutton")}}

Firefox

scalethumbstart

 div {-moz-appearance: scalethumbstart; -webkit-appearance: scalethumbstart; color: black; }

          <div>Lorem</div>

{{EmbedLiveSample("sampleScaleThumbStart",100,50,"","", "nobutton")}}

Firefox

scalethumbtick

 div {-moz-appearance: scalethumbtick; -webkit-appearance: scalethumbtick; color: black; }

          <div>Lorem</div>

{{EmbedLiveSample("sampleScaleThumbTick",100,50,"","", "nobutton")}}

Firefox

scalethumb-vertical

 div {-moz-appearance: scalethumb-vertical; -webkit-appearance: scalethumb-vertical; color: black; }

          <div>Lorem</div>

{{EmbedLiveSample("sampleScaleThumbVertical",100,50,"","", "nobutton")}}

Firefox

scale-vertical

 div {-moz-appearance: scale-vertical; -webkit-appearance: scale-vertical; color: transparent; }

          <div>Lorem</div>

{{EmbedLiveSample("sampleScaleVertical",100,50,"","", "nobutton")}}

Firefox

scrollbarbutton-down

 div {-moz-appearance: scrollbarbutton-down; -webkit-appearance: scrollbarbutton-down; color: black; }

          <div>Lorem</div>

{{EmbedLiveSample("sampleScrollbarButtonDown",100,50,"","", "nobutton")}}

Firefox

scrollbarbutton-left

 div {-moz-appearance: scrollbarbutton-left; -webkit-appearance: scrollbarbutton-left; color: black; }

          <div>Lorem</div>

{{EmbedLiveSample("sampleScrollbarButtonLeft",100,50,"","", "nobutton")}}

Firefox

scrollbarbutton-right

 div {-moz-appearance: scrollbarbutton-right; -webkit-appearance: scrollbarbutton-right; color: black; }

          <div>Lorem</div>

{{EmbedLiveSample("sampleScrollbarButtonRight",100,50,"","", "nobutton")}}

Firefox

scrollbarbutton-up

 div {-moz-appearance: scrollbarbutton-up; -webkit-appearance: scrollbarbutton-up; color: black; }

          <div>Lorem</div>

{{EmbedLiveSample("sampleScrollbarButtonUp",100,50,"","", "nobutton")}}

Firefox

scrollbarthumb-horizontal

 div {-moz-appearance: scrollbarthumb-horizontal; -webkit-appearance: scrollbarthumb-horizontal; color: black; }

          <div>Lorem</div>

{{EmbedLiveSample("sampleScrollbarThumbHorizontal",100,50,"","", "nobutton")}}

Firefox

scrollbarthumb-vertical

 div {-moz-appearance: scrollbarthumb-vertical; -webkit-appearance: scrollbarthumb-vertical; color: black; }

          <div>Lorem</div>

{{EmbedLiveSample("sampleScrollbarThumbVertical",100,50,"","", "nobutton")}}

Firefox

scrollbartrack-horizontal

 div {-moz-appearance: scrollbartrack-horizontal; -webkit-appearance: scrollbartrack-horizontal; color: black; }

          <div>Lorem</div>

{{EmbedLiveSample("sampleScrollbarTrackHorizontal",100,50,"","", "nobutton")}}

Firefox

scrollbartrack-vertical

 div {-moz-appearance: scrollbartrack-vertical; -webkit-appearance: scrollbarbartrack-vertical; color: black; }

          <div>Lorem</div>

{{EmbedLiveSample("sampleScrollbarTrackVertical",100,50,"","", "nobutton")}}

Firefox

searchfield

 div {-moz-appearance: searchfield; -webkit-appearance: searchfield; color: black; }

          <div>Lorem</div>

{{EmbedLiveSample("sampleSearchField",100,50,"","", "nobutton")}}

Firefox Chrome

searchfield-cancel-button

Chrome

separator

 div {-moz-appearance: separator; -webkit-appearance: separator; color: transparent; }

          <div>Lorem</div>

Firefox

sheet

 div {-moz-appearance: sheet; -webkit-appearance: sheet; color: black; }

          <div>Lorem</div>

Firefox

slider-horizontal

Chrome

slider-vertical

Chrome

sliderthumb-horizontal

Chrome

sliderthumb-vertical

Chrome

spinner

 div {-moz-appearance: spinner; -webkit-appearance: spinner; color: transparent; }

          <div>Lorem</div>

Firefox

spinner-downbutton

 div {-moz-appearance: spinner-downbutton; -webkit-appearance: spinner-downbutton; color: black; }

          <div>Lorem</div>

{{EmbedLiveSample("sampleSpinnerDownbutton",100,50,"","", "nobutton")}}

Firefox

spinner-textfield

 div {-moz-appearance: spinner-textfield; -webkit-appearance: spinner-textfield; color: black; }

          <div>Lorem</div>

{{EmbedLiveSample("sampleSpinnerTextfield",100,50,"","", "nobutton")}}

Firefox

spinner-upbutton

 div {-moz-appearance: spinner-upbutton; -webkit-appearance: spinner-upbutton; color: black; }

          <div>Lorem</div>

{{EmbedLiveSample("sampleSpinnerUpbutton",100,50,"","", "nobutton")}}

Firefox

splitter

 div {-moz-appearance: splitter; -webkit-appearance: splitter; color: transparent; }

          <div>Lorem</div>

Firefox

square-button

Chrome

statusbar

 div {-moz-appearance: statusbar; -webkit-appearance: statusbar; color: black; }

          <div>Lorem</div>

Firefox

statusbarpanel

 div {-moz-appearance: statusbarpanel; -webkit-appearance: statusbarpanel; color: black; }

          <div>Lorem</div>

{{EmbedLiveSample("sampleStatusBarPanel",100,50,"","", "nobutton")}}

Firefox

tab

 div {-moz-appearance: tab; -webkit-appearance: tab; height: 20px; color: black; }

          <div>Lorem</div>

Firefox

tabpanel

 div {-moz-appearance: tabpanel; -webkit-appearance: tabpanel; color: black; }

          <div>Lorem</div>

Firefox

tabpanels

 div {-moz-appearance: tabpanels; -webkit-appearance: tabpanels; color: black; }

          <div>Lorem</div>

Firefox

tab-scroll-arrow-back

 div {-moz-appearance: tab-scroll-arrow-back; -webkit-appearance: tab-scroll-arrow-back; color: black; }

          <div>Lorem</div>

{{EmbedLiveSample("sampleTabScrollArrowBack",100,50,"","", "nobutton")}}

Firefox

tab-scroll-arrow-forward

 div {-moz-appearance: tab-scroll-arrow-forward; -webkit-appearance: tab-scroll-arrow-forward; color: black; }

          <div>Lorem</div>

{{EmbedLiveSample("sampleTabScrollArrowForward",100,50,"","", "nobutton")}}

Firefox

textarea

Chrome

textfield

 div {-moz-appearance: textfield; -webkit-appearance: textfield; color: black; }

          <div>Lorem</div>

Firefox Chrome

textfield-multiline

 div {-moz-appearance: textfield-multiline; -webkit-appearance: textfield-multiline; color: black; }

          <div>Lorem</div>

{{EmbedLiveSample("sampleTextfieldMultiline",100,50,"","", "nobutton")}}

Firefox

toolbar

 div {-moz-appearance: toolbar; -webkit-appearance: toolbar; color: black; }

          <div>Lorem</div>

Firefox

toolbarbutton

 div {-moz-appearance: toolbarbutton; -webkit-appearance: toolbarbutton; color: black; }

          <div>Lorem</div>

{{EmbedLiveSample("sampleToolbarButton",100,50,"","", "nobutton")}}

Firefox

toolbarbutton-dropdown

 div {-moz-appearance: toolbarbutton-dropdown; -webkit-appearance: toolbarbutton-dropdown; color: black; }

          <div>Lorem</div>

{{EmbedLiveSample("sampleToolbarButtonDropdown",100,50,"","", "nobutton")}}

Firefox

toolbargripper

 div {-moz-appearance: toolbargripper; -webkit-appearance: toolbargripper; color: black; }

          <div>Lorem</div>

{{EmbedLiveSample("sampleToolbarGripper",100,50,"","", "nobutton")}}

Firefox

toolbox

 div {-moz-appearance: toolbox; -webkit-appearance: toolbox; color: black; }

          <div>Lorem</div>

Firefox

tooltip

 div {-moz-appearance: tooltip; -webkit-appearance: tooltip; color: black; }

          <div>Lorem</div>

Firefox

treeheader

 div {-moz-appearance: treeheader; -webkit-appearance: treeheader; color: black; }

          <div>Lorem</div>

Firefox

treeheadercell

 div {-moz-appearance: treeheadercell; -webkit-appearance: treeheadercell; height:20px; color: black; }

          <div>Lorem</div>

{{EmbedLiveSample("sampleTreeHeaderCell",100,50,"","", "nobutton")}}

Firefox

treeheadersortarrow

 div {-moz-appearance: treeheadersortarrow; -webkit-appearance: treeheadersortarrow; color: black; }

          <div>Lorem</div>

{{EmbedLiveSample("sampleTreeHeaderSortArrow",100,50,"","", "nobutton")}}

Firefox

treeitem

 div {-moz-appearance: treeitem; -webkit-appearance: treeitem; color: black; }

          <div>Lorem</div>

Firefox

treeline

 div {-moz-appearance: treeline; -webkit-appearance: treeline; color: black; }

          <div>Lorem</div>

Firefox

treetwisty

 div {-moz-appearance: treetwisty; -webkit-appearance: treetwisty; color: transparent; }

          <div>Lorem</div>

Firefox

treetwistyopen

 div {-moz-appearance: treetwistyopen; -webkit-appearance: treetwistyopen; color: transparent; }

          <div>Lorem</div>

{{EmbedLiveSample("sampleTreeTwistyOpen",100,50,"","", "nobutton")}}

Firefox

treeview

 div {-moz-appearance: treeview; -webkit-appearance: treeview; color: black; }

          <div>Lorem</div>

Firefox

{{gecko_minversion_inline("2.0")}} -moz-win-borderless-glass

 div {-moz-appearance: -moz-win-borderless-glass; color: black; }

          <div>Lorem</div>

{{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

 div {-moz-appearance: -moz-win-browsertabbar-toolbox; color: black; }

          <div>Lorem</div>

{{EmbedLiveSample("sampleWinBrowsertabbarToolbox",100,50,"","", "nobutton")}}

Firefox

仅支持 Vista 及更高版本的 Windows 系统。这个样式会将磨砂玻璃（Aero Glass）样式（但是不含边框）应用到元素上。

-moz-win-browsertabbar-toolbox

 div {-moz-appearance: -moz-win-browsertabbar-toolbox; color: black; }

          <div>Lorem</div>

{{EmbedLiveSample("sampleWinBrowsertabbarToolbox",100,50,"","", "nobutton")}}

Firefox

仅支持 Vista 及更高版本的 Windows 系统。此工具栏样式主要被用于浏览器的标签栏。

-moz-win-communicationstext

 div {-moz-appearance: -moz-win-communicationstext; color: black; }

          <div>Lorem</div>

{{EmbedLiveSample("sampleWinCommunicationstext",100,50,"","", "nobutton")}}

Firefox

-moz-win-communications-toolbox

 div {-moz-appearance: -moz-win-communications-toolbox; color: black; }

          <div>Lorem</div>

{{EmbedLiveSample("sampleWinCommunicationsToolbox",100,50,"","", "nobutton")}}

Firefox

仅支持 Vista 及更高版本的 Windows 系统。此工具栏样式是为了用于通讯和生产方面的应用程序，与之对应的前景色为 -moz-win-communicationstext。

{{gecko_minversion_inline("6.0")}} -moz-win-exclude-glass

 div {-moz-appearance: -moz-win-exclude-glass; color: black; }

          <div>Lorem</div>

{{EmbedLiveSample("sampleWinExcludeGlass",100,50,"","", "nobutton")}}

Firefox

仅支持 Vista 及更高版本的 Windows 系统。此样式被用于取消元素的磨砂玻璃效果。

-moz-win-glass

 div {-moz-appearance: -moz-win-glass; color: black; }

          <div>Lorem</div>

Firefox

仅支持 Vista 及更高版本的 Windows 系统。这个样式会将磨砂玻璃（Aero Glass）样式（但是不含边框）应用到元素上。

-moz-win-mediatext

 div {-moz-appearance: -moz-win-mediatext; color: black; }

          <div>Lorem</div>

{{EmbedLiveSample("sampleWinMediaText",100,50,"","", "nobutton")}}

Firefox

-moz-win-media-toolbox

 div {-moz-appearance: -moz-win-media-toolbox; color: black; }

          <div>Lorem</div>

{{EmbedLiveSample("sampleWinMediaToolbox",100,50,"","", "nobutton")}}

Firefox

仅支持 Vista 及更高版本的 Windows 系统。此工具栏样式主要用于管理媒体对象。与之对应的前景色为 -moz-win-mediatext。

-moz-window-button-box

 div {-moz-appearance: -moz-window-button-box; color: black; }

          <div>Lorem</div>

{{EmbedLiveSample("sampleWindowButtonBox",100,50,"","", "nobutton")}}

Firefox

-moz-window-button-box-maximized

 div {-moz-appearance: -moz-window-button-box-maximized; color: black; }

          <div>Lorem</div>

{{EmbedLiveSample("sampleWindowButtonBoxMaximized",100,50,"","", "nobutton")}}

Firefox

-moz-window-button-close

 div {-moz-appearance: -moz-window-button-close; color: black; }

          <div>Lorem</div>

{{EmbedLiveSample("sampleWindowButtonClose",100,50,"","", "nobutton")}}

Firefox

-moz-window-button-maximize

 div {-moz-appearance: -moz-window-button-maximize; color: black; }

          <div>Lorem</div>

{{EmbedLiveSample("sampleWindowButtonMaximize",100,50,"","", "nobutton")}}

Firefox

-moz-window-button-minimize

 div {-moz-appearance: -moz-window-button-minimize; color: black; }

          <div>Lorem</div>

{{EmbedLiveSample("sampleWindowButtonMinimize",100,50,"","", "nobutton")}}

Firefox

-moz-window-button-restore

 div {-moz-appearance: -moz-window-button-restore; color: black; }

          <div>Lorem</div>

{{EmbedLiveSample("sampleWindowButtonRestore",100,50,"","", "nobutton")}}

Firefox

-moz-window-frame-bottom

 div {-moz-appearance: -moz-window-frame-bottom; color: black; }

          <div>Lorem</div>

{{EmbedLiveSample("sampleWindowFrameBottom",100,50,"","", "nobutton")}}

Firefox

-moz-window-frame-left

 div {-moz-appearance: -moz-window-frame-left; color: black; }

          <div>Lorem</div>

{{EmbedLiveSample("sampleWindowFrameLeft",100,50,"","", "nobutton")}}

Firefox

-moz-window-frame-right

 div {-moz-appearance: -moz-window-frame-right; color: black; }

          <div>Lorem</div>

{{EmbedLiveSample("sampleWindowFrameRight",100,50,"","", "nobutton")}}

Firefox

-moz-window-titlebar

 div {-moz-appearance: -moz-window-titlebar; color: black; }

          <div>Lorem</div>

{{EmbedLiveSample("sampleWindowTitlebar",100,50,"","", "nobutton")}}

Firefox

-moz-window-titlebar-maximized

 div {-moz-appearance: -moz-window-titlebar-maximized; color: black; }

          <div>Lorem</div>

{{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

浏览器兼容性

浏览器	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari (WebKit)
最低支持	1.0	{{CompatGeckoDesktop("1.0")}}{{property_prefix("-moz")}}^[1]	{{CompatNo}}	{{CompatUnknown}}	3.0{{property_prefix("-webkit")}}

浏览器	Android	Firefox Mobile (Gecko)	IE Phone	Opera Mobile	Safari Mobile
最低支持	{{CompatUnknown}}	{{CompatGeckoMobile("1.0")}}	11.0{{property_prefix("-webkit")}}^[2]	{{CompatUnknown}}	{{CompatUnknown}}

正式语法

示例

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

语法

取值

浏览器兼容性

正式语法

示例

参见