appearance
版本： CSS3
| 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> |
Firefox | |
button-arrow-next
|
div {-moz-appearance: button-arrow-next; -webkit-appearance: button-arrow-next; color: black; }
<div>Lorem</div> |
Firefox | |
button-arrow-previous
|
div {-moz-appearance: button-arrow-previous; -webkit-appearance: button-arrow-previous; color: black; }
<div>Lorem</div> |
Firefox | |
button-arrow-up
|
div {-moz-appearance: button-arrow-up; -webkit-appearance: button-arrow-up; color: black; }
<div>Lorem</div> |
Firefox | |
button-bevel
|
div {-moz-appearance: button-bevel; -webkit-appearance: button-bevel; color: black; }
<div>Lorem</div> |
Firefox Chrome | |
button-focus
|
div {-moz-appearance: button-focus; -webkit-appearance: button-focus; color: black; }
<div>Lorem</div> |
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> |
Firefox | 此元素将被作为复选框容器绘制，可在相应的平台下带有高亮样式。一般情况下，它会包含一个标签（label）与一个复选框。 |
checkbox-label
|
div {-moz-appearance: checkbox-label; -webkit-appearance: checkbox-label; color: black; }
<div>Lorem</div> |
Firefox | |
checkmenuitem
|
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> |
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> |
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> |
Firefox Chrome | 此元素将被绘制为显示一个下拉菜单可以打开的按钮。 |
menulist-text
|
div {-moz-appearance: menulist-text; -webkit-appearance: menulist-text; color: black; }
<div>Lorem</div> |
Firefox Chrome | |
menulist-textfield
|
div {-moz-appearance: menulist-textfield; -webkit-appearance: menulist-textfield; color: black; }
<div>Lorem</div> |
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> |
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> |
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> |
Firefox | |
progresschunk
|
div {-moz-appearance: progresschunk; -webkit-appearance: progresschunk; color: black; }
<div>Lorem</div> |
Firefox | |
progresschunk-vertical
|
div {-moz-appearance: progresschunk-vertical; -webkit-appearance: progresschunk-vertical; color: black; }
<div>Lorem</div> |
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> |
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> |
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> |
Firefox | |
scale-horizontal
|
div {-moz-appearance: scale-horizontal; -webkit-appearance: scale-horizontal; color: transparent; }
<div>Lorem</div> |
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> |
Firefox | |
scalethumbstart
|
div {-moz-appearance: scalethumbstart; -webkit-appearance: scalethumbstart; color: black; }
<div>Lorem</div> |
Firefox | |
scalethumbtick
|
div {-moz-appearance: scalethumbtick; -webkit-appearance: scalethumbtick; color: black; }
<div>Lorem</div> |
Firefox | |
scalethumb-vertical
|
div {-moz-appearance: scalethumb-vertical; -webkit-appearance: scalethumb-vertical; color: black; }
<div>Lorem</div> |
Firefox | |
scale-vertical
|
div {-moz-appearance: scale-vertical; -webkit-appearance: scale-vertical; color: transparent; }
<div>Lorem</div> |
Firefox | |
scrollbarbutton-down
|
div {-moz-appearance: scrollbarbutton-down; -webkit-appearance: scrollbarbutton-down; color: black; }
<div>Lorem</div> |
Firefox | |
scrollbarbutton-left
|
div {-moz-appearance: scrollbarbutton-left; -webkit-appearance: scrollbarbutton-left; color: black; }
<div>Lorem</div> |
Firefox | |
scrollbarbutton-right
|
div {-moz-appearance: scrollbarbutton-right; -webkit-appearance: scrollbarbutton-right; color: black; }
<div>Lorem</div> |
Firefox | |
scrollbarbutton-up
|
div {-moz-appearance: scrollbarbutton-up; -webkit-appearance: scrollbarbutton-up; color: black; }
<div>Lorem</div> |
Firefox | |
scrollbarthumb-horizontal
|
div {-moz-appearance: scrollbarthumb-horizontal; -webkit-appearance: scrollbarthumb-horizontal; color: black; }
<div>Lorem</div> |
Firefox | |
scrollbarthumb-vertical
|
div {-moz-appearance: scrollbarthumb-vertical; -webkit-appearance: scrollbarthumb-vertical; color: black; }
<div>Lorem</div> |
Firefox | |
scrollbartrack-horizontal
|
div {-moz-appearance: scrollbartrack-horizontal; -webkit-appearance: scrollbartrack-horizontal; color: black; }
<div>Lorem</div> |
Firefox | |
scrollbartrack-vertical
|
div {-moz-appearance: scrollbartrack-vertical; -webkit-appearance: scrollbarbartrack-vertical; color: black; }
<div>Lorem</div> |
Firefox | |
searchfield
|
div {-moz-appearance: searchfield; -webkit-appearance: searchfield; color: black; }
<div>Lorem</div> |
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
|
Firefox | ||
spinner-textfield
|
div {-moz-appearance: spinner-textfield; -webkit-appearance: spinner-textfield; color: black; }
<div>Lorem</div>
|
Firefox | |
spinner-upbutton
|
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>
|
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>
|
Firefox | |
tab-scroll-arrow-forward
|
div {-moz-appearance: tab-scroll-arrow-forward; -webkit-appearance: tab-scroll-arrow-forward; color: black; }
<div>Lorem</div>
|
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>
|
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>
|
Firefox | |
toolbarbutton-dropdown
|
div {-moz-appearance: toolbarbutton-dropdown; -webkit-appearance: toolbarbutton-dropdown; color: black; }
<div>Lorem</div>
|
Firefox | |
toolbargripper
|
div {-moz-appearance: toolbargripper; -webkit-appearance: toolbargripper; color: black; }
<div>Lorem</div>
|
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>
|
Firefox | |
treeheadersortarrow
|
div {-moz-appearance: treeheadersortarrow; -webkit-appearance: treeheadersortarrow; color: black; }
<div>Lorem</div>
|
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>
|
Firefox | |
treeview
|
div {-moz-appearance: treeview; -webkit-appearance: treeview; color: black; }
<div>Lorem</div>
|
Firefox | |
-moz-win-borderless-glass
|
div {-moz-appearance: -moz-win-borderless-glass; color: black; }
<div>Lorem</div>
|
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>
|
Firefox | 仅支持 Vista 及更高版本的 Windows 系统。 这个样式会将磨砂玻璃（Aero Glass）样式（但是不含边框）应用到元素上。 |
-moz-win-browsertabbar-toolbox
|
div {-moz-appearance: -moz-win-browsertabbar-toolbox; color: black; }
<div>Lorem</div>
|
Firefox | 仅支持 Vista 及更高版本的 Windows 系统。 此工具栏样式主要被用于浏览器的标签栏。 |
-moz-win-communicationstext
|
div {-moz-appearance: -moz-win-communicationstext; color: black; }
<div>Lorem</div>
|
Firefox | |
-moz-win-communications-toolbox
|
div {-moz-appearance: -moz-win-communications-toolbox; color: black; }
<div>Lorem</div>
|
Firefox |
仅支持 Vista 及更高版本的 Windows 系统。
此工具栏样式是为了用于通讯和生产方面的应用程序，与之对应的前景色为
-moz-win-communicationstext
。
|
-moz-win-exclude-glass
|
div {-moz-appearance: -moz-win-exclude-glass; color: black; }
<div>Lorem</div>
|
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>
|
Firefox | |
-moz-win-media-toolbox
|
div {-moz-appearance: -moz-win-media-toolbox; color: black; }
<div>Lorem</div>
|
Firefox |
仅支持 Vista 及更高版本的 Windows 系统。
此工具栏样式主要用于管理媒体对象。与之对应的前景色为
-moz-win-mediatext
。
|
-moz-window-button-box
|
div {-moz-appearance: -moz-window-button-box; color: black; }
<div>Lorem</div>
|
Firefox | |
-moz-window-button-box-maximized
|
div {-moz-appearance: -moz-window-button-box-maximized; color: black; }
<div>Lorem</div>
|
Firefox | |
-moz-window-button-close
|
div {-moz-appearance: -moz-window-button-close; color: black; }
<div>Lorem</div>
|
Firefox | |
-moz-window-button-maximize
|
div {-moz-appearance: -moz-window-button-maximize; color: black; }
<div>Lorem</div>
|
Firefox | |
-moz-window-button-minimize
|
div {-moz-appearance: -moz-window-button-minimize; color: black; }
<div>Lorem</div>
|
Firefox | |
-moz-window-button-restore
|
div {-moz-appearance: -moz-window-button-restore; color: black; }
<div>Lorem</div>
|
Firefox | |
-moz-window-frame-bottom
|
div {-moz-appearance: -moz-window-frame-bottom; color: black; }
<div>Lorem</div>
|
Firefox | |
-moz-window-frame-left
|
div {-moz-appearance: -moz-window-frame-left; color: black; }
<div>Lorem</div>
|
Firefox | |
-moz-window-frame-right
|
div {-moz-appearance: -moz-window-frame-right; color: black; }
<div>Lorem</div>
|
Firefox | |
-moz-window-titlebar
|
div {-moz-appearance: -moz-window-titlebar; color: black; }
<div>Lorem</div>
|
Firefox | |
-moz-window-titlebar-maximized
|
div {-moz-appearance: -moz-window-titlebar-maximized; color: black; }
<div>Lorem</div>
|
Firefox | |
-apple-pay-button
|
iOS and macOS only . Available on the web starting in iOS 10.1 and macOS 10.12.1 |