Manuales 
appearance 5t3j5p
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. 1f1r60
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 3xs5l
- Syntax:
appearance: none | auto
- Initial: auto
- Applies To: all elements
- Animatable: no
Values u704t
- 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 2h2053
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 6b4m17
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 572e63
The following is the table for the appearance property:
CSS Appearance 353b2o
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 ea5q
- No
- No
- No
- No
- No
Mobile / Tablet 6s2f12
- No
- No
- No
- No
- No