The appearance property controls how native form controls are rendered. Setting appearance: none suppresses the native styles so CSS can be used to fully restyle them.
Or at least, that was what the 2004 CSS3-UI CR had in mind. Unfortunately, this specification was never implemented as designed, and we ended up with a rather convoluted situation on our hands. The property had since been dropped from CSS3-UI and is being re-looked at in the CSS Basic User Interface Module Level 4.
What we currently have is a vendor-prefix soup. No browser supports the non-prefixed version at the moment. And both Webkit and Gecko support a different set of values for -webkit-appearance and -moz-appearance respectively. In theory, you could choose to display an element using platform-native styling depending on the operating system's theme, but in reality, this is not advisable at all.
The most common use of this property at the moment is for resetting default styles using appearance: none. Using any other values to make your element mimic the look and feel of platform-native UIs is not advisable as those values, have already been dropped from the specification.
The newest version of appearance is still being worked on in the CSS Basic User Interface Module 4 and the un-prefixed version now takes 2 values, none and auto.
Official Syntax
- Syntax: appearance: none | auto
- Initial: auto
- Applies To: all elements
- Animatable: no
Values
- none
- No styling is applied on the element at all. The element can be styled using CSS as per normal.
<dt>auto</dt>
<dd>
The user-agent will render form controls with the default styles of the host operating system.
</dd>
</dl>
<dl>
<dt>Webkit-specific</dt>
<dd>
checkbox | radio | push-button | square-button | button | button-bevel | listbox | listitem | menulist | menulist-button | menulist-text | menulist-textfield | scrollbarbutton-up | scrollbarbutton-down | scrollbarbutton-left | scrollbarbutton-right | scrollbartrack-horizontal | scrollbartrack-vertical | scrollbarthumb-horizontal | scrollbarthumb-vertical | scrollbargripper-horizontal | scrollbargripper-vertical | slider-horizontal | slider-vertical | sliderthumb-horizontal | sliderthumb-vertical | caret | searchfield | searchfield-decoration | searchfield-results-decoration | searchfield-results-button | searchfield-cancel-button | textfield | textarea
</dd>
<dt>Mozilla-specific</dt>
<dd>
none | button | checkbox | checkbox-container | checkbox-small | dialog | listbox | menuitem | menulist | menulist-button | menulist-textfield | menupopup | progressbar | radio | radio-container | radio-small | resizer | scrollbar | scrollbarbutton-down | scrollbarbutton-left | scrollbarbutton-right | scrollbarbutton-up | scrollbartrack-horizontal | scrollbartrack-vertical | separator | statusbar | tab | tab-left-edge Obsolete | tabpanels | textfield | textfield-multiline | toolbar | toolbarbutton | toolbox | -moz-mac-unified-toolbar | -moz-win-borderless-glass | -moz-win-browsertabbar-toolbox | -moz-win-communications-toolbox | -moz-win-glass | -moz-win-media-toolbox | tooltip | treeheadercell | treeheadersortarrow | treeitem | treetwisty | treetwistyopen | treeview | window
</dd>
</dl>
Examples
If you want to have custom checkboxes, you would want the default styling to be removed so you are free to style the checkbox any way you like.input[type="checkbox"] {
appearance: none;
}Live Demo
In this demo, we've removed the default styling for the select element and applied custom CSS styles to it instead.
https://jsfiddle.net/huijing/680ccg29/