appearance

Avatar of Sara Cope
Sara Cope on (Updated on )

📣 Freelancers, Developers, and Part-Time Agency Owners: Kickstart Your Own Digital Agency with UACADEMY Launch by UGURUS 📣

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 starting to be unprefixed, which is great because the cross-browser story here is very complicated.

The appearance property 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

Resources

Browser Support

This browser support data is from Caniuse, which has more detail. A number indicates that browser supports the feature at that version and up.

Desktop

ChromeFirefoxIEEdgeSafari
83*80No83*15.4

Mobile / Tablet

Android ChromeAndroid FirefoxAndroidiOS Safari
12212312215.4