How to apply CSS to a Mac Chrome Select Box?

css macos google-chrome padding
Solomon Closson picture Solomon Closson · Apr 13, 2014 · Viewed 43.2k times · Source

Doesn't matter what I do, using Mac OSX 10.9.2 and Chrome Version 33.0.1750.152, padding, background-color, nothing works. I am really just wanting to apply a padding-top and padding-bottom of 5px on a select element, works everywhere cept Chrome on a MAC OSX. What gives? How to do this globally on all platforms??

Answer

Kevin Lynch picture Kevin Lynch · Apr 13, 2014

You need to apply -webkit-appearance:none; when adding CSS to select elements in webkit browsers.

DEMO http://jsfiddle.net/XxkSC/3830/

Related questions

Force DOM redraw/refresh on Chrome/Mac

Every once in a while, Chrome will render perfectly valid HTML/CSS incorrectly or not at all. Digging in through the DOM inspector is often enough to get it to realize the error of its ways and redraw correctly, so …

Read More
Prevent "overscrolling" of web page

In Chrome for Mac, one can "overscroll" a page (for lack of a better word), as shown in the screenshot below, to see "what's behind", similar to the iPad or iPhone. I've noticed that some pages have it disabled, like …

Read More
CSS - Overflow: Scroll; - Always show vertical scroll bar?

So currently I have: #div { position: relative; height: 510px; overflow-y: scroll; } However I don't believe that it will be obvious to some users that there is more content there. They could scroll down the page without knowing that my div …

Read More