CSS Almanac → Properties → A → appearance

appearance

Sara Cope on Aug 31, 2011

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:

To apply platform-specific styling to an element that doesn’t have it by default
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

Andy

# May 18, 2012

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.

min

Permalink to comment# November 11, 2014

can i use “appearence” .. ie9? without plug-in..

# May 24, 2012

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?

Lenny

# December 19, 2012

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.

Geffentisch

# May 8, 2013

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.

Craig Reville

# August 6, 2013

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# August 14, 2013

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

Permalink to comment# February 24, 2015

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

Joao Cunha

# August 19, 2013

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

John Cheesman

Permalink to comment# August 22, 2013

Thanks!
Bernardo Mínguez

Permalink to comment# October 16, 2013

Thanks a lot! Easy solution and works fine!
Jeremy Daley

Permalink to comment# April 15, 2014

For selects, I use “-moz-appearance: window”
Luis Braschi

Permalink to comment# July 13, 2014

Just to give a heads up that it doesn’t work for Firefox 29+.

João Cunha

# August 21, 2013

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

Preston Badeer

Permalink to comment# January 31, 2014

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

Permalink to comment# June 18, 2014

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

Permalink to comment# December 24, 2014

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):
https://gist.github.com/joaocunha/6273016/#comment-944635
to remove my custom background image and just leave the default arrow. Works & doesn’t appear broken = compatible :)

Murat KARTAL

# January 8, 2014

Hi, greetings

How to hide appearance property on Internet Explorer ?

Can you help?

Thanks.

aptkf

# January 14, 2014

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# August 4, 2014

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.

Mike Read

# February 11, 2014

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

Brian

# January 19, 2015

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

Bob

# April 2, 2015

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

Nathan

# May 3, 2015

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.

Doug

# October 30, 2015

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# December 3, 2015

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

Permalink to comment# March 12, 2017

Works good. Thanks!
Khánh

Permalink to comment# February 9, 2018

Great, Thanks u so much!!!
lucifer164

Permalink to comment# November 27, 2018

It works for me ^^. Thank you very much :D

Anwar

# June 20, 2016

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

Arnout

# February 24, 2017

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

Mottie

# December 24, 2017

Please update the list. There is no reference to:

-moz-appearance: checkbox-small;
-moz-appearance: dialog;
-moz-appearance: radio-small;
-moz-appearance: scrollbar;
-moz-appearance: tab-left-edge Obsolete;
-moz-appearance: window;

And there are a ton of missing properties. Too many for me to list out here. See the offical MDN docs

Guo Yunhe

# October 3, 2019

Opera supports it now. https://caniuse.com/#feat=css-appearance

Roger

# November 1, 2020

any body know how to remove the small cross button on the search bar? It seem generated by Chrome.

Chrome 86.0.4240.111
macOS 10.14

WebKit values

Mozilla values

Resources

Browser Support

Comments

Leave a Reply Cancel reply