How to override -webkit-appearance
I have the following CSS which is injected by Javascript:
select {
-webkit-appearance: none;
}
If I open Chrome developer tools and uncheck the properties look ok. How do I override this property in CSS?
+3
David542
source
to share
2 answers
"The appearance property is used to render an item using a platform-based style based on the user's operating system theme.
Here are some of the options available:
- Button
- button-conical
- carriage
- checkbox
- By default the button
- ListBox
- ListItem
- media full screen button mode
- media mute button
- media game button
- media search back buttons
- Media push forward buttons
- media slider
- media sliderthumb
- menulist
- menulist button
- menulist-text
- menulist-TextField
- no one
- button
- radio
- searchfield
- searchfield-cancel button
- searchfield-decoration
- button searchfield results
- searchfield-results-decoration
- slider-horizontal
- vertical slider
- sliderthumb-horizontal
- sliderthumb-vertical
- square button
- text field
- TextField
More about mozilla:
https://developer.mozilla.org/en-US/docs/Web/CSS/-moz-appearance
or
http://www.w3schools.com/cssref/css3_pr_appearance.asp
This is CSS3 inset, so you should be aware of comparability:
http://i.imgur.com/NajSN0O.png
+6
Maverick
source
to share
Maverick's answer is correct, but to be specific, I found that the following scrollbar will go back to the select element:
select{
-webkit-appearance: menulist
}
+3
Obromios
source
to share