CSS Almanac

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:

1. To apply platform specific styling to an element that doesn't have it by default
2. 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;
}

View Demo

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.