/* CSS Basic User Interface Module Level 4 values */ appearance: none; appearance: auto; appearance: menulist-button; appearance: textfield;  /* "Compat-auto" values, which have the same effect as 'auto' */ appearance: button; appearance: searchfield; appearance: textarea; appearance: push-button; appearance: slider-horizontal; appearance: checkbox; appearance: radio; appearance: square-button; appearance: menulist; appearance: listbox; appearance: meter; appearance: progress-bar;  /* Partial list of available values in Gecko */ -moz-appearance: scrollbarbutton-up; -moz-appearance: button-bevel;  /* Partial list of available values in WebKit/Blink (as well as Gecko and Edge) */ -webkit-appearance: media-mute-button; -webkit-appearance: caret;  /* Global values */ appearance: inherit; appearance: initial; appearance: revert; appearance: unset; 

appearance (-moz-appearance, -webkit-appearance)

The appearance CSS property is used to display an element using platform-native styling, based on the operating system's theme. The -moz-appearance and -webkit-appearance properties are non-standard versions of this property, used (respectively) by Gecko (Firefox) and by WebKit-based (e.g., Safari) and Blink-based (e.g., Chrome, Opera) browsers to achieve the same thing. Note that Firefox and Edge also support -webkit-appearance, for compatibility reasons.

The -moz-appearance property was used in XUL stylesheets to design custom widgets with platform-appropriate styling. It was also used in the XBL implementations of the widgets that ship with the Mozilla platform. Starting with Gecko/Firefox 80, these uses were changed to -moz-default-appearance, which should never be used outside of internal stylesheets.

Note: If you wish to use this property on websites, you should test it very carefully. Although it is supported in most modern browsers, its implementation varies. In older browsers, even the keyword none does not have the same effect on all form elements across different browsers, and some do not support it at all. The differences are smaller in the newest browsers.

Syntax

/* CSS Basic User Interface Module Level 4 values */ appearance: none; appearance: auto; appearance: menulist-button; appearance: textfield;  /* "Compat-auto" values, which have the same effect as 'auto' */ appearance: button; appearance: searchfield; appearance: textarea; appearance: push-button; appearance: slider-horizontal; appearance: checkbox; appearance: radio; appearance: square-button; appearance: menulist; appearance: listbox; appearance: meter; appearance: progress-bar;  /* Partial list of available values in Gecko */ -moz-appearance: scrollbarbutton-up; -moz-appearance: button-bevel;  /* Partial list of available values in WebKit/Blink (as well as Gecko and Edge) */ -webkit-appearance: media-mute-button; -webkit-appearance: caret;  /* Global values */ appearance: inherit; appearance: initial; appearance: revert; appearance: unset; 

Values

The following values are implemented only for one or both of the prefixed properties, but not on the standard appearance property.

Formal definition

Formal syntax

none | auto | textfield | menulist-button | <compat-auto>
where <compat-auto> = searchfield | textarea | push-button | slider-horizontal | checkbox | radio | square-button | menulist | listbox | meter | progress-bar | button

Examples

Make an element look like a menulist button

.exampleone { -webkit-appearance: menulist-button;    -moz-appearance: menulist-button;         appearance: menulist-button; } 

Apply custom styling

<p><input type="checkbox" id="check"><label for="check">Agree to something</label></p> 

input {   appearance: none;   display: inline-block;   vertical-align: middle; }  input[type="checkbox"] {   border: 2px solid #555;   width: 20px;   height: 20px;   padding: 4px; } input[type="checkbox"]:checked {   background: #555;   background-clip: content-box; } label {   display: inline-block;   vertical-align: middle;   margin: 0 0 -2px 8px; } 

Specifications

See also