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;

See the Pen CSS Appearance Property by CSS-Tricks Team (@css-tricks) on CodePen.

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.

Chrome Safari Firefox Opera IE Android iOS
Any 3.0+ Any None None Any Any


  1. Andy

    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.

    Vote this bug up. Damn well had to use a hack to workaround this. What year are we in, 2012 or 1992?

  3. Lenny
    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. Craig Reville
    Permalink to comment#

    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.

    • Nando Vieira
      Permalink to comment#

      Except that with IE10+ you can style dropdowns, while Firefox is a no-go. Firefox is the new IE.

    • Peter
      Permalink to comment#

      I’d just force redirect the IE users to the chrome/safari download page

  6. Joao Cunha
    Permalink to comment#

    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:

    select {
        -webkit-appearance: none;
        -moz-appearance: none;
        text-indent: 1px;
        text-overflow: '';
  7. João Cunha
    Permalink to comment#

    By the way, I just created a gist explaining the details of it (and to track improvements to the solution):

    • Preston Badeer
      Permalink to comment#

      @ChrisCoyier You should totally include this in the post, it’s golden!

    • Kirill
      Permalink to comment#

      It’s doesn’t work, have anyone any other solution?

    • jul
      Permalink to comment#

      Yep, this doesn’t work.
      Using Firefox 34.0.5, opening the example in codepen, the arrow is still there.

      Since I was using a background image for different arrows, what I’m doing now is using this way of targeting Firefox (thx nathansmith):

      to remove my custom background image and just leave the default arrow. Works & doesn’t appear broken = compatible :)

  8. Murat KARTAL
    Permalink to comment#

    Hi, greetings

    How to hide appearance property on Internet Explorer ?

    Can you help?


  9. aptkf
    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. Mike Read
    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;.

  11. Brian
    Permalink to comment#

    none of the solutions provided work for me, anyone else have an idea how to hide the select arrow on firefox for android?

  12. Bob
    Permalink to comment#

    On iPad 3 with iOS 8 in Safari it doesn’t work.

  13. Nathan

    Hey Chris, just wanted to let you know that you’ve got a link to up there where you talk about Safari search inputs, which is a 404. Feel free to delete this comment, just thought it’d be the easiest way to get this to you.

  14. Doug
    Permalink to comment#

    Joao Cunha’s link was great, he also added a fix for Internet Explorer. The most current answer:

    select {
    -webkit-appearance: none;
    -moz-appearance: none;

    select::-ms-expand {
    display: none;

    • Michael
      Permalink to comment#

      Fantastic! This was the missing piece of the puzzle for me!

  15. Anwar
    Permalink to comment#

    What are peoples’ thoughts on:

    form {
      * {
         appearance: none;

    On another note; it pleases me very much that CSS Tricks show up more and more often as the top Google/DuckDuckGo result.

    I happened on this page searching for ‘appearance none’


Leave a Comment

Posting Code

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences like this:

  function example() {
    element.innerHTML = "<div>code</div>";

We have a pretty good* newsletter.