CODEWITHSUNDEEP
css
David542
David542

Reputation: 110163

How to override '-webkit-appearance'

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?

Upvotes: 5

Views: 18923

Answers (2)

Obromios
Obromios

Reputation: 16373

Maverick's answer is correct, but to be specific, I found the following put the scroll bar back on a select item:

select{
    -webkit-appearance: menulist
}

Upvotes: 6

Maverick
Maverick

Reputation: 886

"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:

https://i.sstatic.net/ZmHg9.png

Upvotes: 6

Related Questions