How do I apply padding within a select dropdown box?

Question

I have two types of input. A select dropdown box, and a regular input.

On the input, I have added a padding: 10px; that makes it look big.

The issue is once I put the select box beside it, they are both different heights.

How do I either apply the padding to the select, or make it the same height as the input.

Edit 1

This is how it looks to me: enter image description here

Isn't it working? Well either a) i dont understand your question or B) It work on chrome. — Karl-André Gagnon, May 19 '13 at 02:40
It's not working. The select box is smaller - in physical size - than the input text field. I am using Chrome on OS X and it looks smaller to me. Let me update the question with a screenshot of how it looks to me. — marcamillion, May 19 '13 at 02:41
it must certainly be because of the OS since input arent the same, well i can tell you it work on Windows8 + lastest chrome. — Karl-André Gagnon, May 19 '13 at 02:43
Works fine in SeaMonkey 2.17, Chrome 26 and Firefox 20 under Fedora 17. If this is really important to you, consider using jQueriUI, to make your controls all look alike. — Vedran Šego, May 19 '13 at 02:46

score 8 · Accepted Answer · answered May 19 '13 at 02:50

8

Try adding -webkit-appearance: none at least to the <select> but possibly to both. OSX really wants their controls to look apple-y

answered May 19 '13 at 02:50

Explosion Pills

Anyway to get this to not look weird on OS X? By weird, I mean 'plain'? – marcamillion May 19 '13 at 03:07
@marcamillion there may be other styles being applied; you can look at the "Computed Styles + Show Inherited" to see what's being applied. I don't have OS-X available right now, so I can't tell – Explosion Pills May 19 '13 at 03:08
Hey @ExplosionPills - any ideas as to why this makes the text disappear? It is the highest rank style too - so there is no other style that it is inheriting that is causing that, that I can see. Here are more details - http://stackoverflow.com/questions/16631801/why-does-using-webkit-appearance-none-on-a-select-option-in-osx-make-the-tex – marcamillion May 19 '13 at 09:33

score 0 · Answer 2 · edited May 23 '17 at 12:13

0

Add this attribute to the select element:

-webkit-appearance: menulist-button;

Check this answer for more details: https://stackoverflow.com/a/3075922

edited May 23 '17 at 12:13

Community

answered May 19 '13 at 02:53

cmac

2 Answers2