How to apply CSS to a Mac Chrome Select Box?

Question

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 1

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

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

Answer 2

There is better option to achieve a natural design:

height:30px;
background:#ffffff;

DEMO JSFiddle

p.s

Vector's answer is hiding the arrows on the right side.

Answer 3

Add the following property to your select in your css file:

-webkit-appearance:none;

Answer 4

If you are using bootstrap, you can add class custom-select:

<select class="form-control custom-select">

After adding it, you can eventually adjust height by adding line-height property to css:

select {
    line-height: 1.3;
}

https://getbootstrap.com/docs/4.1/components/input-group/#custom-select