Manuales 
appearance 4a1h6l
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. i1jp
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 55184y
- Syntax:
appearance: none | auto
- Initial: auto
- Applies To: all elements
- Animatable: no
Values 584j31
- 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 3e5p5z
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 2x4j2k
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 k5t66
The following is the table for the appearance property:
CSS Appearance 5i1ay
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 3n671n
- No
- No
- No
- No
- No
Mobile / Tablet 4q224p
- No
- No
- No
- No
- No