How to override '-webkit-appearance'

Question

I have the following CSS which is injected by JavaScript:

select {
    -webkit-appearance: none;
}

If I open up Chrome developer tools and uncheck those properties things look OK. How would I override this property in the CSS?

Answer 1

"The appearance property is used to display an element using a platform-native styling based on the users' operating system's theme."

Here are some options available:

• button
• button-bevel
• caret
• checkbox
• default-button
• listbox
• listitem
• media-fullscreen-button
• media-mute-button
• media-play-button
• media-seek-back-button
• media-seek-forward-button
• media-slider
• media-sliderthumb
• menulist
• menulist-button
• menulist-text
• menulist-textfield
• none
• push-button
• radio
• searchfield
• searchfield-cancel-button
• searchfield-decoration
• searchfield-results-button
• searchfield-results-decoration
• slider-horizontal
• slider-vertical
• sliderthumb-horizontal
• sliderthumb-vertical
• square-button
• textarea
• textfield

For more look at mozilla:

https://developer.mozilla.org/en-US/docs/Web/CSS/-moz-appearance

or

http://www.w3schools.com/cssref/css3_pr_appearance.asp

This is a CSS3 protery so you should be aware of the comparability:

http://i.imgur.com/NajSN0O.png