appearance
The appearance property is used to display an element using a platform-native styling based on the users' operating system's theme.
.thing {
-webkit-appearance: value;
-moz-appearance: value;
appearance: value;
}This is used for one of two reasons:
- To apply platform specific styling to an element that doesn't have it by default
- To remove platform specific styling to an element that does have it by default
For instance, inputs with a type=search in WebKit browsers by default have rounded corners and are very strict in what you can alter via CSS. If you don't want that styling, you can remove it in one fell swoop with appearance.
input[type=search] {
-webkit-appearance: none;
}Or you could take a input with type=text and just make it look like a search input:
input[type=text] {
-webkit-appearance: searchfield;
}WebKit values
- 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 values
- 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
Resources
- Mozilla Docs for -moz-appearance
- Trent Walton on Webkit Appearance
- Shaun Inman on Disabling Inner Text Shadow of Text Inputs on iPad
- CSS3 Spec
Browser Support
This is kind of tricky. Nothing supports non-prefixed versions yet. But they might never. For instance with the search input styling, that's not in the spec anywhere, so that might always remain a purely -webkit- thing.
| Chrome | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Any | 3.0+ | Any | None | None | Any | Any |
Whats the IE fall back for this? Is is there none.. im trying to avoid using jQuery on select items and using the appearance none, with a background image.
Very informative.
Firefox support for this property is broken. -moz-appearance: none should remove the drop-arrow of a select element but it does not.
https://bugzilla.mozilla.org/show_bug.cgi?id=649849
Vote this bug up. Damn well had to use a hack to workaround this. What year are we in, 2012 or 1992?
Looks like
appearanceproperty has been dropped from spec1.It is best to evacuate the bowels at least once per day. This way, you are not carrying around excess weight which enables you to to accelerate faster away from danger than a person whose bowels weren’t evacuated.
You save at the gas pump too. Your car uses less fuel if it doesn’t have to accelerate waste matter.