• 首页
  • css3教程
  • html5教程
  • jQuery手册
  • php7教程
  • MySQL手册
  • apache手册
  • 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
    div {-moz-appearance: checkmenuitem; -webkit-appearance: checkmenuitem; height: 20px; color: black; }
    <div>Lorem</div>
    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
    div {-moz-appearance: spinner-downbutton; -webkit-appearance: spinner-downbutton; color: black; }
    <div>Lorem</div>
    Firefox
    spinner-textfield
    div {-moz-appearance: spinner-textfield; -webkit-appearance: spinner-textfield; color: black; }
    <div>Lorem</div>
    Firefox
    spinner-upbutton
    div {-moz-appearance: spinner-upbutton; -webkit-appearance: spinner-upbutton; color: black; }
    <div>Lorem</div>
    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-buttoniOS and macOS only. Available on the web starting in iOS 10.1 and macOS 10.12.1

    下篇:pointer-events