-moz-appearance (-webkit-appearance)

  • Revision slug: CSS/-moz-appearance
  • Revision title: -moz-appearance
  • Revision id: 335087
  • Created:
  • Creator: teoli
  • Is current revision? No
  • Comment

Revision Content

{{ CSSMozExtensionRef() }}

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.

  • {{ Xref_cssinitial() }}: {{ Cssxref("none") }}
  • Applies to: all elements
  • {{ Xref_cssinherited() }}: no
  • Media: {{ Xref_cssvisual() }} {{ xref_cssinteractive() }} {{ xref_cssaural() }}
  • {{ Xref_csscomputed() }}: as specified

Syntax

-moz-appearance:  <appearance>

Values

<appearance> is one of the following:

Value Demo Description
none {{EmbedLiveSample("sampleNone",100,100)}} No special styling is applied. This is the default. Note, however, {{ bug(649849) }} and {{ bug(605985) }}.
button {{EmbedLiveSample("sampleButton",100,100)}} The element is drawn like a button.
button-arrow-down {{EmbedLiveSample("sampleButtonArrowDown",100,100)}}  
button-arrow-next {{EmbedLiveSample("sampleButtonArrowNext",100,100)}}  
button-arrow-previous {{EmbedLiveSample("sampleButtonArrowPrevious",100,100)}}  
button-arrow-up {{EmbedLiveSample("sampleButtonArrowUp",100,100)}}  
button-bevel {{EmbedLiveSample("sampleButtonBevel",100,100)}}  
button-focus {{EmbedLiveSample("sampleButtonFocus",100,100)}}  
caret {{EmbedLiveSample("sampleCaret",100,100)}}  
checkbox {{EmbedLiveSample("sampleCheckbox",100,100)}} The element is drawn like a checkbox, including only the actual "checkbox" portion.
checkbox-container {{EmbedLiveSample("sampleCheckboxContainer",100,100)}} 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 {{EmbedLiveSample("sampleCheckboxLabel",100,100)}}  
checkmenuitem {{EmbedLiveSample("sampleCheckmenuitem",100,100)}}  
dualbutton {{EmbedLiveSample("sampleDualButton",100,100)}}  
groupbox {{EmbedLiveSample("sampleGroupbox",100,100)}}  
listbox {{EmbedLiveSample("sampleListBox",100,100)}}  
listitem {{EmbedLiveSample("sampleListitem",100,100)}}  
menuarrow {{EmbedLiveSample("sampleMenuArrow",100,100)}}  
menubar {{EmbedLiveSample("sampleMenubar",100,100)}}  
menucheckbox {{EmbedLiveSample("sampleMenuCheckbox",100,100)}}  
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
-
 
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
-
 
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.
{{ gecko_minversion_inline("2.0") }} -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.
{{ gecko_minversion_inline("6.0") }} -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;
}

Browser compatibility

Browser Lowest version Support of
Internet Explorer --- ---
Firefox (Gecko) 1.0 (1.0)

-moz-appearance

Not fully supported

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

Specifications

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

{{ languages( { "fr": "fr/CSS/-moz-appearance", "ja": "ja/CSS/-moz-appearance", "pl": "pl/CSS/-moz-appearance" } ) }}

Revision Source

<p>{{ CSSMozExtensionRef() }}</p>
<h3 id="Summary">Summary</h3>
<p>The<code> -moz-appearance </code>CSS property is used in Gecko (Firefox) to display an element using a platform-native styling based on the operating system's theme.</p>
<p>This property is frequently used in <a href="/en/XUL" title="en/XUL">XUL</a> stylesheets to design custom widgets with platform-appropriate styling. It is also used in the <a href="/en/XBL" title="en/XBL">XBL</a> implementations of the widgets that ship with the Mozilla platform.</p>
<ul>
  <li>{{ Xref_cssinitial() }}: {{ Cssxref("none") }}</li>
  <li>Applies to: all elements</li>
  <li>{{ Xref_cssinherited() }}: no</li>
  <li>Media: {{ Xref_cssvisual() }} <span class="comment">{{ xref_cssinteractive() }} {{ xref_cssaural() }}</span></li>
  <li>{{ Xref_csscomputed() }}: as specified</li>
</ul>
<h3 id="Syntax">Syntax</h3>
<pre>
-moz-appearance:  &lt;appearance&gt;
</pre>
<h3 id="Values">Values</h3>
<p><code>&lt;appearance&gt; </code>is one of the following:</p>
<table class="standard-table">
  <tbody>
    <tr>
      <th>Value</th>
      <th>Demo</th>
      <th>Description</th>
    </tr>
    <tr>
      <td><code>none</code></td>
      <td>
        <div id="sampleNone" style="display:none">
          <pre class="brush:css">
 div {-moz-appearance: none; -webkit-appearance: none; color: black;}</pre>
          <pre class="brush:html">
          &lt;div&gt;Lorem&lt;/div&gt;
</pre>
        </div>
        {{EmbedLiveSample("sampleNone",100,100)}}</td>
      <td>No special styling is applied. This is the default. Note, however, {{ bug(649849) }} and {{ bug(605985) }}.</td>
    </tr>
    <tr>
      <td><code>button</code></td>
      <td>
        <div id="sampleButton" style="display:none">
          <pre class="brush:css">
 div {-moz-appearance: button; -webkit-appearance: button; color: black; }</pre>
          <pre class="brush:html">
          &lt;div&gt;Lorem&lt;/div&gt;</pre>
        </div>
        {{EmbedLiveSample("sampleButton",100,100)}}</td>
      <td>The element is drawn like a button.</td>
    </tr>
    <tr>
      <td><code>button-arrow-down</code></td>
      <td>
        <div id="sampleButtonArrowDown" style="display:none">
          <pre class="brush:css">
 div {-moz-appearance: button-arrow-down; -webkit-appearance: button-arrow-down; color: black; }</pre>
          <pre class="brush:html">
          &lt;div&gt;Lorem&lt;/div&gt;</pre>
        </div>
        {{EmbedLiveSample("sampleButtonArrowDown",100,100)}}</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td><code>button-arrow-next</code></td>
      <td>
        <div id="sampleButtonArrowNext" style="display:none">
          <pre class="brush:css">
 div {-moz-appearance: button-arrow-next; -webkit-appearance: button-arrow-next; color: black; }</pre>
          <pre class="brush:html">
          &lt;div&gt;Lorem&lt;/div&gt;</pre>
        </div>
        {{EmbedLiveSample("sampleButtonArrowNext",100,100)}}</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td><code>button-arrow-previous</code></td>
      <td>
        <div id="sampleButtonArrowPrevious" style="display:none">
          <pre class="brush:css">
 div {-moz-appearance: button-arrow-previous; -webkit-appearance: button-arrow-previous; color: black; }</pre>
          <pre class="brush:html">
          &lt;div&gt;Lorem&lt;/div&gt;</pre>
        </div>
        {{EmbedLiveSample("sampleButtonArrowPrevious",100,100)}}</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td><code>button-arrow-up</code></td>
      <td>
        <div id="sampleButtonArrowUp" style="display:none">
          <pre class="brush:css">
 div {-moz-appearance: button-arrow-up; -webkit-appearance: button-arrow-up; color: black; }</pre>
          <pre class="brush:html">
          &lt;div&gt;Lorem&lt;/div&gt;</pre>
        </div>
        {{EmbedLiveSample("sampleButtonArrowUp",100,100)}}</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td><code>button-bevel</code></td>
      <td>
        <div id="sampleButtonBevel" style="display:none">
          <pre class="brush:css">
 div {-moz-appearance: button-bevel; -webkit-appearance: button-bevel; color: black; }</pre>
          <pre class="brush:html">
          &lt;div&gt;Lorem&lt;/div&gt;</pre>
        </div>
        {{EmbedLiveSample("sampleButtonBevel",100,100)}}</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td><code>button-focus</code></td>
      <td>
        <div id="sampleButtonFocus" style="display:none">
          <pre class="brush:css">
 div {-moz-appearance: button-focus; -webkit-appearance: button-focus; color: black; }</pre>
          <pre class="brush:html">
          &lt;div&gt;Lorem&lt;/div&gt;</pre>
        </div>
        {{EmbedLiveSample("sampleButtonFocus",100,100)}}</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td><code>caret</code></td>
      <td>
        <div id="sampleCaret" style="display:none">
          <pre class="brush:css">
 div {-moz-appearance: caret; -webkit-appearance: caret; color: black; }</pre>
          <pre class="brush:html">
          &lt;div&gt;Lorem&lt;/div&gt;</pre>
        </div>
        {{EmbedLiveSample("sampleCaret",100,100)}}</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td><code>checkbox</code></td>
      <td>
        <div id="sampleCheckbox" style="display:none">
          <pre class="brush:css">
 div {-moz-appearance: checkbox; -webkit-appearance: checkbox; color: black; }</pre>
          <pre class="brush:html">
          &lt;div&gt;Lorem&lt;/div&gt;</pre>
        </div>
        {{EmbedLiveSample("sampleCheckbox",100,100)}}</td>
      <td>The element is drawn like a checkbox, including only the actual "checkbox" portion.</td>
    </tr>
    <tr>
      <td><code>checkbox-container</code></td>
      <td>
        <div id="sampleCheckboxContainer" style="display:none">
          <pre class="brush:css">
 div {-moz-appearance: checkbox-container; -webkit-appearance: checkbox-container; color: black; }</pre>
          <pre class="brush:html">
          &lt;div&gt;Lorem&lt;/div&gt;</pre>
        </div>
        {{EmbedLiveSample("sampleCheckboxContainer",100,100)}}</td>
      <td>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.</td>
    </tr>
    <tr>
      <td><code>checkbox-label</code></td>
      <td>
        <div id="sampleCheckboxLabel" style="display:none">
          <pre class="brush:css">
 div {-moz-appearance: checkbox-label; -webkit-appearance: checkbox-label; color: black; }</pre>
          <pre class="brush:html">
          &lt;div&gt;Lorem&lt;/div&gt;</pre>
        </div>
        {{EmbedLiveSample("sampleCheckboxLabel",100,100)}}</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td><code>checkmenuitem</code></td>
      <td>
        <div id="sampleCheckmenuitem" style="display:none">
          <pre class="brush:css">
 div {-moz-appearance: checkmenuitem; -webkit-appearance: checkmenuitem; height: 20px; color: black; }</pre>
          <pre class="brush:html">
          &lt;div&gt;Lorem&lt;/div&gt;</pre>
        </div>
        {{EmbedLiveSample("sampleCheckmenuitem",100,100)}}</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td><code>dualbutton</code></td>
      <td>
        <div id="sampleDualButton" style="display:none">
          <pre class="brush:css">
 div {-moz-appearance: dualbutton; -webkit-appearance: dualbutton; color: black; }</pre>
          <pre class="brush:html">
          &lt;div&gt;Lorem&lt;/div&gt;</pre>
        </div>
        {{EmbedLiveSample("sampleDualButton",100,100)}}</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td><code>groupbox</code></td>
      <td>
        <div id="sampleGroupbox" style="display:none">
          <pre class="brush:css">
 div {-moz-appearance: groupbox; -webkit-appearance: groupbox; color: black; }</pre>
          <pre class="brush:html">
          &lt;div&gt;Lorem&lt;/div&gt;</pre>
        </div>
        {{EmbedLiveSample("sampleGroupbox",100,100)}}</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td><code>listbox</code></td>
      <td>
        <div id="sampleListbox" style="display:none">
          <pre class="brush:css">
 div {-moz-appearance: listbox; -webkit-appearance: listbox; height:20px; color: black; }</pre>
          <pre class="brush:html">
          &lt;div&gt;Lorem&lt;/div&gt;</pre>
        </div>
        {{EmbedLiveSample("sampleListBox",100,100)}}</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td><code>listitem</code></td>
      <td>
        <div id="sampleListItem" style="display:none">
          <pre class="brush:css">
 div {-moz-appearance: listitem; -webkit-appearance: listitem; color: black; }</pre>
          <pre class="brush:html">
          &lt;div&gt;Lorem&lt;/div&gt;</pre>
        </div>
        {{EmbedLiveSample("sampleListitem",100,100)}}</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td><code>menuarrow</code></td>
      <td>
        <div id="sampleMenuArrow" style="display:none">
          <pre class="brush:css">
 div {-moz-appearance: menuarrow; -webkit-appearance: menuarrow; color: black; }</pre>
          <pre class="brush:html">
          &lt;div&gt;Lorem&lt;/div&gt;</pre>
        </div>
        {{EmbedLiveSample("sampleMenuArrow",100,100)}}</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td><code>menubar</code></td>
      <td>
        <div id="sampleMenubar" style="display:none">
          <pre class="brush:css">
 div {-moz-appearance: menubar; -webkit-appearance: menubar; color: balck; }</pre>
          <pre class="brush:html">
          &lt;div&gt;Lorem&lt;/div&gt;</pre>
        </div>
        {{EmbedLiveSample("sampleMenubar",100,100)}}</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td><code>menucheckbox</code></td>
      <td>
        <div id="sampleMenuCheckbox" style="display:none">
          <pre class="brush:css">
 div {-moz-appearance: menucheckbox; -webkit-appearance: menucheckbox; color: black; }</pre>
          <pre class="brush:html">
          &lt;div&gt;Lorem&lt;/div&gt;</pre>
        </div>
        {{EmbedLiveSample("sampleMenuCheckbox",100,100)}}</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td><code>menuimage</code></td>
      <td>
        <div style="-moz-appearance: menuimage; -webkit-appearance: menuimage; color: black;">
          -</div>
      </td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td><code>menuitem</code></td>
      <td>
        <div style="-moz-appearance: menuitem; -webkit-appearance: menuitem; height: 20px; color: black;">
          -</div>
      </td>
      <td>The element is styled as menu item, item is highlighted when hovered.</td>
    </tr>
    <tr>
      <td><code>menuitemtext</code></td>
      <td>
        <div style="-moz-appearance: menuitemtext; -webkit-appearance: menuitemtext; color: black;">
          -</div>
      </td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td><code>menulist</code></td>
      <td>
        <div style="-moz-appearance: menulist; -webkit-appearance: menulist;  height: 20px; color: black;">
          -</div>
      </td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td><code>menulist-button</code></td>
      <td>
        <div style="-moz-appearance: menulist-button; -webkit-appearance: menulist-button; color: black;">
          -</div>
      </td>
      <td>The element is styled as a button that would indicate a menulist can be opened.</td>
    </tr>
    <tr>
      <td><code>menulist-text</code></td>
      <td>
        <div style="-moz-appearance: menulist-text; -webkit-appearance: menulist-text; color: black;">
          -</div>
      </td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td><code>menulist-textfield</code></td>
      <td>
        <div style="-moz-appearance: menulist-textfield; -webkit-appearance: menulist-textfield; height: 20px; color: black;">
          -</div>
      </td>
      <td>The element is styled as the text field for a menulist. (Not implemented for the Windows platform)</td>
    </tr>
    <tr>
      <td><code>menupopup</code></td>
      <td>
        <div style="-moz-appearance: menupopup; -webkit-appearance: menupopup; height: 20px; color: black;">
          -</div>
      </td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td><code>menuradio</code></td>
      <td>
        <div style="-moz-appearance: menuradio; -webkit-appearance: menuradio; color: black;">
          -</div>
      </td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td><code>menuseparator</code></td>
      <td>
        <div style="-moz-appearance: menuseparator; -webkit-appearance: menuseparator; color: black;">
          -</div>
      </td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td><code>progressbar</code></td>
      <td>
        <div style="-moz-appearance: progressbar; -webkit-appearance: progressbar; color: transparent;">
          -</div>
      </td>
      <td>The element is styled like a progress bar.</td>
    </tr>
    <tr>
      <td><code>progressbar-vertical</code></td>
      <td>
        <div style="-moz-appearance: progressbar-vertical; -webkit-appearance: progressbar-vertical; color: transparent;">
          -</div>
      </td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td><code>progresschunk</code></td>
      <td>
        <div style="-moz-appearance: progresschunk; -webkit-appearance: progresschunk; color: transparent;">
          -</div>
      </td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td><code>progresschunk-vertical</code></td>
      <td>
        <div style="-moz-appearance: progresschunk-vertical; -webkit-appearance: progresschunk-vertical; color: transparent;">
          -</div>
      </td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td><code>radio</code></td>
      <td>
        <div style="-moz-appearance: radio; -webkit-appearance: radio; color: transparent;">
          -</div>
      </td>
      <td>The element is drawn like a radio button, including only the actual "radio button" portion.</td>
    </tr>
    <tr>
      <td><code>radio-container</code></td>
      <td>
        <div style="-moz-appearance: radio-container; -webkit-appearance: radio-container; color: transparent;">
          -</div>
      </td>
      <td>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.</td>
    </tr>
    <tr>
      <td><code>radio-label</code></td>
      <td>
        <div style="-moz-appearance: radio-label; -webkit-appearance: radio-label; color: transparent;">
          -</div>
      </td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td><code>radiomenuitem</code></td>
      <td>
        <div style="-moz-appearance: radiomenuitem; -webkit-appearance: radiomenuitem; color: transparent;">
          -</div>
      </td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td><code>resizer</code></td>
      <td>
        <div style="-moz-appearance: resizer; -webkit-appearance: resizer; color: transparent;">
          -</div>
      </td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td><code>resizerpanel</code></td>
      <td>
        <div style="-moz-appearance: resizerpanel; -webkit-appearance: resizerpanel; color: transparent;">
          -</div>
      </td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td><code>scale-horizontal</code></td>
      <td>
        <div style="-moz-appearance: scale-horizontal; -webkit-appearance: scale-horizontal; color: transparent;">
          -</div>
      </td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td><code>scalethumbend</code></td>
      <td>
        <div style="-moz-appearance: scalethumbend; -webkit-appearance: scalethumbend; color: transparent;">
          -</div>
      </td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td><code>scalethumb-horizontal</code></td>
      <td>
        <div style="-moz-appearance: scalethumb-horizontal; -webkit-appearance: scalethumb-horizontal; color: transparent;">
          -</div>
      </td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td><code>scalethumbstart</code></td>
      <td>
        <div style="-moz-appearance: scalethumbstart; -webkit-appearance: scalethumbstart; color: transparent;">
          -</div>
      </td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td><code>scalethumbtick</code></td>
      <td>
        <div style="-moz-appearance: scalethumbtick; -webkit-appearance: scalethumbtick; color: transparent;">
          -</div>
      </td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td><code>scalethumb-vertical</code></td>
      <td>
        <div style="-moz-appearance: scalethumb-vertical; -webkit-appearance: scalethumb-vertical; color: transparent;">
          -</div>
      </td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td><code>scale-vertical</code></td>
      <td>
        <div style="-moz-appearance: scale-vertical; -webkit-appearance: scale-vertical; color: transparent;">
          -</div>
      </td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td><code>scrollbarbutton-down</code></td>
      <td>
        <div style="-moz-appearance: scrollbarbutton-down; -webkit-appearance: scrollbarbutton-down; color: transparent;">
          -</div>
      </td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td><code>scrollbarbutton-left</code></td>
      <td>
        <div style="-moz-appearance: scrollbarbutton-left; -webkit-appearance: scrollbarbutton-left; color: transparent;">
          -</div>
      </td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td><code>scrollbarbutton-right</code></td>
      <td>
        <div style="-moz-appearance: scrollbarbutton-right; -webkit-appearance: scrollbarbutton-right; color: transparent;">
          -</div>
      </td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td><code>scrollbarbutton-up</code></td>
      <td>
        <div style="-moz-appearance: scrollbarbutton-up; -webkit-appearance: scrollbarbutton-up; color: transparent;">
          -</div>
      </td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td><code>scrollbarthumb-horizontal</code></td>
      <td>
        <div style="-moz-appearance: scrollbarthumb-horizontal; -webkit-appearance: scrollbarthumb-horizontal; color: transparent;">
          -</div>
      </td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td><code>scrollbarthumb-vertical</code></td>
      <td>
        <div style="-moz-appearance: scrollbarthumb-vertical; -webkit-appearance: scrollbarthumb-vertical; color: transparent;">
          -</div>
      </td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td><code>scrollbartrack-horizontal</code></td>
      <td>
        <div style="-moz-appearance: scrollbartrack-horizontal; -webkit-appearance: scrollbartrack-horizontal; color: transparent;">
          -</div>
      </td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td><code>scrollbartrack-vertical</code></td>
      <td>
        <div style="-moz-appearance: scrollbartrack-vertical; -webkit-appearance: scrollbartrack-vertical; color: transparent;">
          -</div>
      </td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td><code>searchfield</code></td>
      <td>
        <div style="-moz-appearance: searchfield; -webkit-appearance: searchfield; color: transparent;">
          -</div>
      </td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td><code>separator</code></td>
      <td>
        <div style="-moz-appearance: separator; -webkit-appearance: separator; color: transparent;">
          -</div>
      </td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td><code>sheet</code></td>
      <td>
        <div style="-moz-appearance: sheet; -webkit-appearance: sheet; color: transparent;">
          -</div>
      </td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td><code>spinner</code></td>
      <td>
        <div style="-moz-appearance: spinner; -webkit-appearance: spinner; color: transparent;">
          -</div>
      </td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td><code>spinner-downbutton</code></td>
      <td>
        <div style="-moz-appearance: spinner-downbutton; -webkit-appearance: spinner-downbutton; color: transparent;">
          -</div>
      </td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td><code>spinner-textfield</code></td>
      <td>
        <div style="-moz-appearance: spinner-textfield; -webkit-appearance: spinner-textfield; color: transparent;">
          -</div>
      </td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td><code>spinner-upbutton</code></td>
      <td>
        <div style="-moz-appearance: spinner-upbutton; -webkit-appearance: spinner-upbutton; color: transparent;">
          -</div>
      </td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td><code>splitter</code></td>
      <td>
        <div style="-moz-appearance: splitter; -webkit-appearance: splitter; color: transparent;">
          -</div>
      </td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td><code>statusbar</code></td>
      <td>
        <div style="-moz-appearance: statusbar; -webkit-appearance: statusbar; color: transparent;">
          -</div>
      </td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td><code>statusbarpanel</code></td>
      <td>
        <div style="-moz-appearance: statusbarpanel; -webkit-appearance: statusbarpanel; color: transparent;">
          -</div>
      </td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td><code>tab</code></td>
      <td>
        <div style="-moz-appearance: tab; -webkit-appearance: tab; color: transparent;">
          -</div>
      </td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td><code>tabpanel</code></td>
      <td>
        <div style="-moz-appearance: tabpanel; -webkit-appearance: tabpanel; color: transparent;">
          -</div>
      </td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td><code>tabpanels</code></td>
      <td>
        <div style="-moz-appearance: tabpanels; -webkit-appearance: tabpanels; color: transparent;">
          -</div>
      </td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td><code>tab-scroll-arrow-back</code></td>
      <td>
        <div style="-moz-appearance: tab-scroll-arrow-back; -webkit-appearance: tab-scroll-arrow-back; color: transparent;">
          -</div>
      </td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td><code>tab-scroll-arrow-forward</code></td>
      <td>
        <div style="-moz-appearance: tab-scroll-arrow-forward; -webkit-appearance: tab-scroll-arrow-forward; color: transparent;">
          -</div>
      </td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td><code>textfield</code></td>
      <td>
        <div style="-moz-appearance: textfield; -webkit-appearance: textfield; color: transparent;">
          -</div>
      </td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td><code>textfield-multiline</code></td>
      <td>
        <div style="-moz-appearance: textfield-multiline; -webkit-appearance: textfield-multiline; color: transparent;">
          -</div>
      </td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td><code>toolbar</code></td>
      <td>
        <div style="-moz-appearance: toolbar; -webkit-appearance: toolbar; color: transparent;">
          -</div>
      </td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td><code>toolbarbutton</code></td>
      <td>
        <div style="-moz-appearance: toolbarbutton; -webkit-appearance: toolbarbutton; color: transparent;">
          -</div>
      </td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td><code>toolbarbutton-dropdown</code></td>
      <td>
        <div style="-moz-appearance: toolbarbutton-dropdown; -webkit-appearance: toolbarbutton-dropdown; color: transparent;">
          -</div>
      </td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td><code>toolbargripper</code></td>
      <td>
        <div style="-moz-appearance: toolbargripper; -webkit-appearance: toolbargripper; color: transparent;">
          -</div>
      </td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td><code>toolbox</code></td>
      <td>
        <div style="-moz-appearance: toolbox; -webkit-appearance: toolbox; color: transparent;">
          -</div>
      </td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td><code>tooltip</code></td>
      <td>
        <div style="-moz-appearance: tooltip; -webkit-appearance: tooltip; color: transparent;">
          -</div>
      </td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td><code>treeheader</code></td>
      <td>
        <div style="-moz-appearance: treeheader; -webkit-appearance: treeheader; color: transparent;">
          -</div>
      </td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td><code>treeheadercell</code></td>
      <td>
        <div style="-moz-appearance: treeheadercell; -webkit-appearance: treeheadercell; color: transparent;">
          -</div>
      </td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td><code>treeheadersortarrow</code></td>
      <td>
        <div style="-moz-appearance: treeheadersortarrow; -webkit-appearance: treeheadersortarrow; color: transparent;">
          -</div>
      </td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td><code>treeitem</code></td>
      <td>
        <div style="-moz-appearance: treeitem; -webkit-appearance: treeitem; color: transparent;">
          -</div>
      </td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td><code>treeline</code></td>
      <td>
        <div style="-moz-appearance: treeline; -webkit-appearance: treeline; color: transparent;">
          -</div>
      </td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td><code>treetwisty</code></td>
      <td>
        <div style="-moz-appearance: treetwisty; -webkit-appearance: treetwisty; color: transparent;">
          -</div>
      </td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td><code>treetwistyopen</code></td>
      <td>
        <div style="-moz-appearance: treetwistyopen; -webkit-appearance: treetwistyopen; color: transparent;">
          -</div>
      </td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td><code>treeview</code></td>
      <td>
        <div style="-moz-appearance: treeview; -webkit-appearance: treeview; color: transparent;">
          -</div>
      </td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td><code>-moz-mac-unified-toolbar</code></td>
      <td>
        <div style="-moz-appearance: -moz-mac-unified-toolbar; color: transparent;">
          -</div>
      </td>
      <td><strong>Mac OS X only</strong>. This causes the toolbar and title bar to render using the unified toolbar style common to Mac OS X 10.4 and later applications.</td>
    </tr>
    <tr>
      <td>{{ gecko_minversion_inline("2.0") }} <code>-moz-win-borderless-glass</code></td>
      <td>
        <div style="-moz-appearance: -moz-win-borderless-glass; color: transparent;">
          -</div>
      </td>
      <td><strong>Windows Vista and later only</strong>. This style applies the Aero Glass effect -- but without a border -- to the element.</td>
    </tr>
    <tr>
      <td><code>-moz-win-browsertabbar-toolbox</code></td>
      <td>
        <div style="-moz-appearance: -moz-win-browsertabbar-toolbox; color: transparent;">
          -</div>
      </td>
      <td><strong>Windows Vista and later only</strong>. This toolbox style is meant to be used for the tab bar in a browser.</td>
    </tr>
    <tr>
      <td><code>-moz-win-communicationstext</code></td>
      <td>
        <div style="-moz-appearance: -moz-win-communicationstext; color: transparent;">
          -</div>
      </td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td><code>-moz-win-communications-toolbox</code></td>
      <td>
        <div style="-moz-appearance: -moz-win-communications-toolbox; color: transparent;">
          -</div>
      </td>
      <td><strong>Windows Vista and later only</strong>. This toolbox style is meant to be used in communications and productivity applications. Corresponding foreground color is <code>-moz-win-communicationstext</code>.</td>
    </tr>
    <tr>
      <td>{{ gecko_minversion_inline("6.0") }} <code>-moz-win-exclude-glass</code></td>
      <td>
        <div style="-moz-appearance: -moz-win-exclude-glass; color: transparent;">
          -</div>
      </td>
      <td><strong>Windows Vista and later only. </strong>This styles is used to exclude the Aero Glass effect on the element.</td>
    </tr>
    <tr>
      <td><code>-moz-win-glass</code></td>
      <td>
        <div style="-moz-appearance: -moz-win-glass; color: transparent;">
          -</div>
      </td>
      <td><strong>Windows Vista and later only</strong>. This style applies the Aero Glass effect to the element.</td>
    </tr>
    <tr>
      <td><code>-moz-win-mediatext</code></td>
      <td>
        <div style="-moz-appearance: -moz-win-mediatext; color: transparent;">
          -</div>
      </td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td><code>-moz-win-media-toolbox</code></td>
      <td>
        <div style="-moz-appearance: -moz-win-media-toolbox; color: transparent;">
          -</div>
      </td>
      <td><strong>Windows Vista and later only</strong>. This toolbox style is meant to be used in applications that manage media objects. Corresponding foreground color is <code>-moz-win-mediatext</code>.</td>
    </tr>
    <tr>
      <td><code>-moz-window-button-box</code></td>
      <td>
        <div style="-moz-appearance: -moz-window-button-box; color: transparent;">
          -</div>
      </td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td><code>-moz-window-button-box-maximized</code></td>
      <td>
        <div style="-moz-appearance: -moz-window-button-box-maximized; color: transparent;">
          -</div>
      </td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td><code>-moz-window-button-close</code></td>
      <td>
        <div style="-moz-appearance: -moz-window-button-close; color: transparent;">
          -</div>
      </td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td><code>-moz-window-button-maximize</code></td>
      <td>
        <div style="-moz-appearance: -moz-window-button-maximize; color: transparent;">
          -</div>
      </td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td><code>-moz-window-button-minimize</code></td>
      <td>
        <div style="-moz-appearance: -moz-window-button-minimize; color: transparent;">
          -</div>
      </td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td><code>-moz-window-button-restore</code></td>
      <td>
        <div style="-moz-appearance: -moz-window-button-restore; color: transparent;">
          -</div>
      </td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td><code>-moz-window-frame-bottom</code></td>
      <td>
        <div style="-moz-appearance: -moz-window-frame-bottom; color: transparent;">
          -</div>
      </td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td><code>-moz-window-frame-left</code></td>
      <td>
        <div style="-moz-appearance: -moz-window-frame-left; color: transparent;">
          -</div>
      </td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td><code>-moz-window-frame-right</code></td>
      <td>
        <div style="-moz-appearance: -moz-window-frame-right; color: transparent;">
          -</div>
      </td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td><code>-moz-window-titlebar</code></td>
      <td>
        <div style="-moz-appearance: -moz-window-titlebar; color: transparent;">
          -</div>
      </td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td><code>-moz-window-titlebar-maximized</code></td>
      <td>
        <div style="-moz-appearance: -moz-window-titlebar-maximized; color: transparent;">
          -</div>
      </td>
      <td>&nbsp;</td>
    </tr>
  </tbody>
</table>
<h3 id="Examples">Examples</h3>
<pre>
.exampleone {
	-moz-appearance: toolbarbutton;
}
</pre>
<h3 id="Browser_compatibility">Browser compatibility</h3>
<table class="standard-table">
  <tbody>
    <tr>
      <th>Browser</th>
      <th>Lowest version</th>
      <th>Support of</th>
    </tr>
    <tr>
      <td>Internet Explorer</td>
      <td>---</td>
      <td>---</td>
    </tr>
    <tr>
      <td>Firefox (Gecko)</td>
      <td><strong>1.0</strong> (1.0)</td>
      <td>
        <p><code>-moz-appearance</code></p>
        <p>Not fully supported</p>
      </td>
    </tr>
    <tr>
      <td>Opera (Presto)</td>
      <td>---</td>
      <td>---</td>
    </tr>
    <tr>
      <td>Safari | Chrome | WebKit</td>
      <td>3.0 | 1.0 | 522</td>
      <td><code>-webkit-appearance</code></td>
    </tr>
  </tbody>
</table>
<h3 id="Specifications">Specifications</h3>
<p>The <code>appearance</code> property is currently not present in any newer CSS specification.</p>
<ul>
  <li><a class="external" href="http://www.w3.org/TR/2004/CR-css3-ui-20040511/#appearance">CSS 3 Basic User Interface #appearance</a> Candidate Recommendation 2004-05-11, outdated</li>
  <li><a class="external" href="http://wiki.csswg.org/spec/css4-ui#dropped-css3-features">Dropped CSS3 features from the UI spec</a></li>
</ul>
<p>{{ languages( { "fr": "fr/CSS/-moz-appearance", "ja": "ja/CSS/-moz-appearance", "pl": "pl/CSS/-moz-appearance" } ) }}</p>
Revert to this revision