CODEWITHSUNDEEP
cssmacosgoogle-chromepadding
Solomon Closson
Solomon Closson

Reputation: 6217

How to apply CSS to a Mac Chrome Select Box?

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

Upvotes: 29

Views: 51103

Answers (5)

RuiVBoas
RuiVBoas

Reputation: 384

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.

Upvotes: 0

Marko Milivojevic
Marko Milivojevic

Reputation: 579

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

Upvotes: 3

Almog_0
Almog_0

Reputation: 422

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.

Upvotes: 9

pconnor88
pconnor88

Reputation: 365

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

-webkit-appearance:none;

Upvotes: 3

Kevin Lynch
Kevin Lynch

Reputation: 24733

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

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

Upvotes: 68

Related Questions