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??

score 67 · Accepted Answer · answered Apr 13 '14 at 08:05

67

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

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

answered Apr 13 '14 at 08:05

Kevin Lynch

24,427
3
36
37

Wow, does this apply to any other browsers also? Or just Chrome? I mean, do other browsers have a prefix for this also? – Solomon Closson Apr 13 '14 at 08:07
7

Ok, but I want the arrow in the select box, but just want padding added. `-webkit-appearance: none` removes the arrow for the select box, but how to get it back? – Solomon Closson Apr 13 '14 at 08:22
You could use a background image TUTORIAL http://bavotasan.com/2011/style-select-box-using-only-css/ – Kevin Lynch Apr 13 '14 at 08:31
Thanks, that's what I'll do! – Solomon Closson Apr 13 '14 at 08:34
Better answer is in this thread: http://stackoverflow.com/questions/2966855/padding-is-not-working-in-safari-and-ie-in-select-list/2967371#2967371 – Stalinko Apr 25 '17 at 05:22

Almog_0 · Answer 2 · 2016-02-04T12:37:25.337

9

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.

edited Feb 04 '16 at 12:37

answered Feb 04 '16 at 12:31

Almog_0

422
4
11

3

Oh wow, so padding doesn't work, but height and border do?! Seems very arbitrary.. – Erfan Aug 25 '16 at 02:21

score 3 · Answer 3 · answered Apr 13 '14 at 08:05

3

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

-webkit-appearance:none;

answered Apr 13 '14 at 08:05

pconnor88

345
3
13

3

Ok, but I want the arrow in the select box, but just want padding added. `-webkit-appearance: none` removes the arrow for the select box, but how to get it back? – Solomon Closson Apr 13 '14 at 08:21
@Almog_0 answer fix the arrow problem. – Mike Feb 04 '16 at 12:44

score 2 · Answer 4 · answered Dec 23 '18 at 11:52

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

score 0 · Answer 5 · answered Apr 30 '20 at 08:59

This solution is not only for select but also for input and textarea.

select,
textarea,
input {
    -webkit-appearance: none !important;
       -moz-appearance: none !important;
            appearance: none !important;
}

I also applied the solution for all browsers, so it should work the same way everywhere.

!important did the trick for me, but it will depend if you will need it or not.

How to apply CSS to a Mac Chrome Select Box?

5 Answers5

Linked