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;
}

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

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.