appearance | CSS-Tricks

The appearance property is used to display an element using a platform-native styling based on the users’ operating system’s theme.
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:
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.
Or you could take a input with type=text and just make it look like a search input:
We've got lots of ways to help you connect with the greatest front-end community in all the land.
Sign up to get front-end roundups, browser updates, and exclusive content sent to your inbox bi-weekly.
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.
can i use “appearence” .. ie9? without plug-in..
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?
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.
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.
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.
Except that with IE10+ you can style dropdowns, while Firefox is a no-go. Firefox is the new IE.
I’d just force redirect the IE users to the chrome/safari download page
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/
Thanks a lot! Easy solution and works fine!
For selects, I use “-moz-appearance: window”
Just to give a heads up that it doesn’t work for Firefox 29+.
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
@ChrisCoyier You should totally include this in the post, it’s golden!
It’s doesn’t work, have anyone any other solution?
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 :)
How to hide appearance property on Internet Explorer ?
Might want to add a little update here. Like Lenny above mentioned, appearance has no spec. So cross-browser behavior is erratic.
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.
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.