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

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

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. User Avatar
    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. User Avatar
    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. User Avatar
    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. User Avatar
    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. User Avatar
    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.

    • User Avatar
      Nando Vieira
      Permalink to comment#

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

    • User Avatar
      Peter
      Permalink to comment#

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

  6. User Avatar
    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: http://jsfiddle.net/4WVZW/

    select {
        -webkit-appearance: none;
        -moz-appearance: none;
        text-indent: 1px;
        text-overflow: '';
    }
    
  7. User Avatar
    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): https://gist.github.com/joaocunha/6273016

    • User Avatar
      Preston Badeer
      Permalink to comment#

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

    • User Avatar
      Kirill
      Permalink to comment#

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

    • User Avatar
      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. User Avatar
    Murat KARTAL
    Permalink to comment#

    Hi, greetings

    How to hide appearance property on Internet Explorer ?

    Can you help?

    Thanks.

  9. User Avatar
    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.

    • User Avatar
      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. User Avatar
    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. User Avatar
    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. User Avatar
    Bob
    Permalink to comment#

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

  13. User Avatar
    Nathan

    Hey Chris, just wanted to let you know that you’ve got a link to https://css-tricks.com/7261-webkit-html5-search-inputs/ 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. User Avatar
    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;
    }

  15. User Avatar
    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’

    FTW

  16. User Avatar
    Arnout
    Permalink to comment#

    The default appearance is supported in IE Edge (v12+)

Submit a Comment

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

icon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag