Manuales 
appearance i713x
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. 315r4j
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 Interface Module Level 4.
What we currently have is a vendor-prefix soup. No browser s the non-prefixed version at the moment. And both Webkit and Gecko 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 Interface Module 4 and the un-prefixed version now takes 2 values, none and auto.
Official Syntax 2f2j3w
- Syntax:
appearance: none | auto
- Initial: auto
- Applies To: all elements
- Animatable: no
Values 445h6m
- none
- No styling is applied on the element at all. The element can be styled using CSS as per normal.
- auto
- The -agent will render form controls with the default styles of the host operating system.
- Webkit-specific
- 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
- Mozilla-specific
- 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 | tabs | 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
Examples 5w70f
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 603y6q
In this demo, we’ve removed the default styling for the select element and applied custom CSS styles to it instead.
View this demo on the Codrops PlaygroundBrowser 51c73
The following is the table for the appearance property:
CSS Appearance 5k1g16
The `appearance` property defines how elements (particularly form controls) appear by default. By setting the value to `none` the default appearance can be entirely redefined using other CSS properties.
W3C Working Draft
ed from the following versions:
Desktop 1qa5q
- No
- No
- No
- No
- No
Mobile / Tablet 6x6t5m
- No
- No
- No
- No
- No