CSS Reference Property

appearance

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.

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 User Interface Module Level 4.

What we currently have is a vendor-prefix soup. No browser supports the non-prefixed version at the moment. And both Webkit and Gecko support 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 User Interface Module 4 and the un-prefixed version now takes 2 values, none and auto.

Official Syntax

  • Syntax: appearance: none | auto
  • Initial: auto
  • Applies To: all elements
  • Animatable: no

Values

none
No styling is applied on the element at all. The element can be styled using CSS as per normal.
auto
The user-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 | 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

Examples

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

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 Playground

Browser Support

The following is the support table for the appearance property:

CSS Appearance

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

Supported from the following versions:

Desktop

  • 4*
  • 2*
  • No
  • 15*
  • 3.1*

Mobile / Tablet

  • 3.2*
  • 2.1*
  • 37*
  • 57*
  • 52*

* denotes prefix required.

  • Supported:
  • Yes
  • No
  • Partially
  • Polyfill

Stats from caniuse.com

Written by

Last updated December 11, 2016 at 7:49 pm by Mary Lou

Do you have a suggestion, question or want to contribute? Submit an issue.