Reputation: 6217
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
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
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
Reputation: 422
There is better option to achieve a natural design:
height:30px;
background:#ffffff;
p.s
Vector's answer is hiding the arrows on the right side.
Upvotes: 9
Reputation: 365
Add the following property to your select in your css file:
-webkit-appearance:none;
Upvotes: 3
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