Grow your CSS skills. Land your dream job.

appearance

Last updated on:

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

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

Comments

  1. 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.

  2. pd

    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?

  3. Permalink to comment#

    Looks like appearance property has been dropped from spec1.

    Some form of “appearance:none” may be worth exploring as a CSS4-UI feature.

    At the time of the introduction and development of the ‘appearance’ property, it appeared that the limited set of specific UI elements in HTML were not going to be extended, and thus we tried going so (in a limited capacity) with CSS.

    Since new input elements etc. have been added to HTML5, and there is clearly opportunity to add more as deemed practically necessary, it makes more sense now to pursue new specific UI elements in HTML5 first, and then design any new related CSS features subsequently.

  4. Geffentisch

    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.

  5. I would love an update on what to use for fallbacks.

    At the moment I’m thinking that since I’m building a custom system and there is NO IE support that either, I do this in divs and completely go against how this form questioning system works or I have to create a swap out script that replaces the input fields with divs in IE.

    I hate IE, beyond me why anyone would want to stay with them when they have such a fundamental lack of support across the board.

  6. Hi, mates! Just figured out how to remove the select arrow from Firefox. The trick is to use a mix of -prefix-appearance, text-indent and text-overflow.

    Live example: http://jsfiddle.net/4WVZW/

    select {
        -webkit-appearance: none;
        -moz-appearance: none;
        text-indent: 1px;
        text-overflow: '';
    }
    
  7. By the way, I just created a gist explaining the details of it (and to track improvements to the solution): https://gist.github.com/joaocunha/6273016

  8. Hi, greetings

    How to hide appearance property on Internet Explorer ?

    Can you help?

    Thanks.

  9. Permalink to comment#

    Might want to add a little update here. Like Lenny above mentioned, appearance has no spec. So cross-browser behavior is erratic.

    Per MDN:

    Do not use this property on Web sites: not only is it non-standard, but its behavior changes from one browser to another. Even the keyword none does not have the same behavior on each form element across different browsers, and some do not support it at all.

    This has led to some development tools, such as autoprefixer, from dropping any support for it.

    • MaxArt
      Permalink to comment#

      It’s a shame, really, that this property isn’t widely supported. At least the value none should be well supported, and that would actually be more or less the only property that developers care about.

      But surprise, Mozilla itself does a terrible job with none, so that it doesn’t work, for example, on select elements.

      I think this property should be simplified a lot, allowing just values like none, auto and maybe, but not necessarily, a restricted range of elements like input, radio, checkbox and select. Everything else should be dropped.
      Maybe that would solve some vendor divergences.

  10. Permalink to comment#

    It should be noted that currently in iOS7 for iPhone 5S (cannot say for other versions / devices) that -webkit-appearance: none; does not remove the rounded corners on submit buttons, and needs to be combined with border-radius: 0;.

Leave a Comment

Posting Code

  • Use Markdown, and it will escape the code for you, like `<div class="cool">`.
  • Use triple-backticks for blocks of code.
    ``` 
    <div>
      <h1>multi-line block of code</h1>
      <span>be cool yo.</span>
    </div>
    ```
  • Otherwise, escape your code, like <code>&lt;div class="cool"&gt;</code>. Markdown is just easier though.

Current ye@r *

*May or may not contain any actual "CSS" or "Tricks".