MDN may have intermittent access issues April 18 13:00 - April 19 01:00 UTC. See whistlepig.mozilla.org for all notifications.

mozilla
Your Search Results

    -moz-appearance (-webkit-appearance)

    This article is in need of a technical review.

    Non-standard
    This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.

    « CSS « CSS Reference « Mozilla Extensions

    Summary

    The -moz-appearance CSS property is used in Gecko (Firefox) to display an element using a platform-native styling based on the operating system's theme.

    This property is frequently used in XUL stylesheets to design custom widgets with platform-appropriate styling. It is also used in the XBL implementations of the widgets that ship with the Mozilla platform.

    Do not use this property on Web sites: not only is it non-standard, but its behavior changes from one browser to another. Even the keyword none does not have the same behavior on each form element across different browsers, and some do not support it at all.

    Syntax

    /* Partial list of available values */
    -moz-appearance: none;
    -moz-appearance: button;
    -moz-appearance: checkbox;
    -moz-appearance: scrollbarbutton-up;
    
    -webkit-appearance: none;
    -webkit-appearance: button;
    -webkit-appearance: checkbox;
    -webkit-appearance: scrollbarbutton-up;
    

    Values

    <appearance> is one of the following:

    Value Demo Description
    none No special styling is applied. This is the default. Note, however, bug 649849 and bug 605985.
    button The element is drawn like a button.
    button-arrow-down  
    button-arrow-next  
    button-arrow-previous  
    button-arrow-up  
    button-bevel  
    button-focus  
    caret  
    checkbox The element is drawn like a checkbox, including only the actual "checkbox" portion.
    checkbox-container The element is drawn like a container for a checkbox, which may include a prelighting background effect under certain platforms. Normally a would contain a label and a checkbox.
    checkbox-label  
    checkmenuitem  
    dualbutton  
    groupbox  
    listbox  
    listitem  
    menuarrow  
    menubar  
    menucheckbox  
    menuimage  
    menuitem The element is styled as menu item, item is highlighted when hovered.
    menuitemtext  
    menulist  
    menulist-button The element is styled as a button that would indicate a menulist can be opened.
    menulist-text  
    menulist-textfield The element is styled as the text field for a menulist. (Not implemented for the Windows platform)
    menupopup  
    menuradio  
    menuseparator  
    meterbar New in Fx 16.
    meterchunk New in Fx 16
    progressbar The element is styled like a progress bar.
    progressbar-vertical  
    progresschunk  
    progresschunk-vertical  
    radio The element is drawn like a radio button, including only the actual "radio button" portion.
    radio-container The element is drawn like a container for a radio button, which may include a prelighting background effect under certain platforms. Normally would contain a label and a radio button.
    radio-label  
    radiomenuitem  
    range  
    range-thumb  
    resizer  
    resizerpanel  
    scale-horizontal  
    scalethumbend  
    scalethumb-horizontal  
    scalethumbstart  
    scalethumbtick  
    scalethumb-vertical  
    scale-vertical  
    scrollbarbutton-down  
    scrollbarbutton-left  
    scrollbarbutton-right  
    scrollbarbutton-up  
    scrollbarthumb-horizontal  
    scrollbarthumb-vertical  
    scrollbartrack-horizontal  
    scrollbartrack-vertical  
    searchfield  
    separator  
    sheet  
    spinner  
    spinner-downbutton  
    spinner-textfield  
    spinner-upbutton  
    splitter  
    statusbar  
    statusbarpanel  
    tab  
    tabpanel  
    tabpanels  
    tab-scroll-arrow-back  
    tab-scroll-arrow-forward  
    textfield  
    textfield-multiline  
    toolbar  
    toolbarbutton  
    toolbarbutton-dropdown  
    toolbargripper  
    toolbox  
    tooltip  
    treeheader  
    treeheadercell  
    treeheadersortarrow  
    treeitem  
    treeline  
    treetwisty  
    treetwistyopen  
    treeview  
    -moz-mac-unified-toolbar Mac OS X only. This causes the toolbar and title bar to render using the unified toolbar style common to Mac OS X 10.4 and later applications.
    -moz-win-borderless-glass Windows Vista and later only. This style applies the Aero Glass effect -- but without a border -- to the element.
    -moz-win-browsertabbar-toolbox Windows Vista and later only. This toolbox style is meant to be used for the tab bar in a browser.
    -moz-win-communicationstext  
    -moz-win-communications-toolbox Windows Vista and later only. This toolbox style is meant to be used in communications and productivity applications. Corresponding foreground color is -moz-win-communicationstext.
    -moz-win-exclude-glass Windows Vista and later only. This styles is used to exclude the Aero Glass effect on the element.
    -moz-win-glass Windows Vista and later only. This style applies the Aero Glass effect to the element.
    -moz-win-mediatext  
    -moz-win-media-toolbox Windows Vista and later only. This toolbox style is meant to be used in applications that manage media objects. Corresponding foreground color is -moz-win-mediatext.
    -moz-window-button-box  
    -moz-window-button-box-maximized  
    -moz-window-button-close  
    -moz-window-button-maximize  
    -moz-window-button-minimize  
    -moz-window-button-restore  
    -moz-window-frame-bottom  
    -moz-window-frame-left  
    -moz-window-frame-right  
    -moz-window-titlebar  
    -moz-window-titlebar-maximized  

    Examples

    .exampleone {
    	-moz-appearance: toolbarbutton;
    }
    

    Specifications

    The appearance property is currently not present in any newer CSS specification.

    Browser compatibility

    Browser Lowest version Support of
    Internet Explorer (desktop) --- ---
    Internet Explorer (Windows Phone) IE 11 on Windows Phone 8.1 -webkit-appearance (only the none, button, and textfield values)
    Firefox (Gecko) 1.0 (1.0)

    -moz-appearance

    Not fully supported

    Opera (Presto) --- ---
    Safari | Chrome | WebKit 3.0 | 1.0 | 522 -webkit-appearance

    See also

    Document Tags and Contributors

    Last updated by: wbamberg,