How to standardize the height of a select box between Chrome and Firefox?

Question

Check out http://demo.neeraj.name/admin_data in both Chrome and Firefox. In Firefox the select box has large height. In Chrome the height of select box is very small.

How do I make the select box of chrome and safari look like the select drop down of Firefox?

Please consider changing the correct answer as the one with the highest votes is far more practical. — willdanceforfun, Apr 13 '13 at 12:07
This question is no longer real. Because you are referring to things that no longer exist. It would have been better if you copied the HTML, CSS and other relevant things into the question text... — Lzh, Dec 16 '13 at 12:15
Makes sure to scroll down to the very bottom. Unfortunately the best answer is 2nd from last. — Gavin, Jun 17 '14 at 13:23
try [jqTranform](http://www.dfc-e.com/metiers/multimedia/opensource/jqtransform/). you'll have more control over the form elements. — pixeltocode, Mar 31 '10 at 08:09

score 147 · Answer 1 · edited Aug 04 '14 at 15:47

147

I've run into this problem before

Setting the height of the select element works fine on webkit in Windows, but fails on webkit on a Mac.

If you set the css attribute

-webkit-appearance: menulist-button;

It will allow the height to work properly on a Mac, but it creates this weird black border on windows. You can adjust the border by setting the css border property, but that changes the look on all browsers that let you style select borders, not just webkit.

At this point, i gave up, but hopefully that is a good starting point if you want to investigate further.

edited Aug 04 '14 at 15:47

George

36,413
9
66
103

answered Jun 19 '10 at 15:01

Chi

22,624
6
36
37

19

This should be the right answer. – pixelfreak Aug 22 '11 at 21:06
1

Worked great, thanks! Oh, and to set this just for Chrome, use the following media query to wrap the statement: `@media screen and (-webkit-min-device-pixel-ratio:0) { select { -webkit-appearance: menulist-button; } }` – daveaspinall Apr 17 '13 at 16:17
4

This doesn't work for me. `-webkit-appearance: none` works, but then on Chrome it doesn't show the text in the dropdown (for both the options and the selected option). – marcamillion May 19 '13 at 09:41
I am using opacity: 0 and my own graphic on top, so this is perfect +1 – Neil Oct 22 '13 at 11:03
how do you `set the css attribute` ? – Robbo_UK Mar 04 '15 at 16:39
1

thanks @marcamillion .. your comment helped me. – Joe Aug 11 '15 at 06:46

score 34 · Answer 2 · edited Sep 09 '13 at 17:32

34

Increase the line-height.

edited Sep 09 '13 at 17:32

Mohammad Areeb Siddiqui

9,795
14
71
113

answered Aug 31 '10 at 06:14

Praveen Vijayan

6,521
2
29
28

17

This stopped working in Mac Chrome 30.0.1599.69 – travis-146 Oct 08 '13 at 17:54
YOU ARE MY HERO!!!! Suffered for hours with this crap... Now I just need to set the things font for the selected item – KapteinMarshall Oct 24 '13 at 15:53
1

@travis-146 A workaround to this is to add `-webkit-select-appearance: none` and then style it how you want. Downside to that approach is that you have to completely style it yourself (add arrows, etc). – Jonathan Dumaine Jan 03 '14 at 01:50
-1 line-height has no effect on FF Ubuntu 12. Increasing the font-size worked. – jenson-button-event Mar 25 '14 at 16:26

score 17 · Answer 3 · edited Jan 30 '13 at 23:51

17

height will not work on Safari unless you also have a background set. If you set a background you may lose the drop down arrows in the windows version of Safari. Again form styling seems to be wrought with issues.

edited Jan 30 '13 at 23:51

Ted

7,122
9
50
76

answered Sep 19 '12 at 19:39

eggs

331
1
4
10

6

Setting 'background: none' seems sufficient to make Chrome and Safari respect the height property for select boxes on OSX. Still seems like a hack though. The jQuery combobox solution is probably better long-term. – Anton Dec 01 '12 at 19:25
@antonm: I'm not sure how well jQuery combobox works on mobile. – cdmckay Jan 28 '13 at 14:32
1

@antonm doesn't most of CSS seem like a hack? :) I've accepted the feeling that I'm doing something the wrong way when I'm writing CSS – corbin Apr 25 '13 at 19:34

score 9 · Answer 4 · answered Aug 29 '13 at 02:51

9

@Chi's answer is correct. Another quick hack is to add a border CSS style:

select { border: 1px solid #CCC }

This both triggers the -webkit-appearance: menulist-button property with the added benefit of removing the ugly black border :).

answered Aug 29 '13 at 02:51

Chris J

3,828
1
20
17

Same effect as `-webkit-appearance: menulist-button;` – Charles Mar 18 '15 at 11:02
Totally works. Chrome, Safari, Firefox. FTW! – mpemburn Jul 18 '16 at 13:22

score 8 · Answer 5 · answered Jul 19 '13 at 11:00

8

use css border property. make the select border to none or 0. border:none; showing perfectly in chrome and safari in mac os

answered Jul 19 '13 at 11:00

Praveen

81
1
1

Setting the `border:none;` or `border:1px solid #ccc;` seems to turn on the ability to modify the font properties of the input for Mac Chrome/Safari. Strange. – Justin Aug 12 '13 at 18:52
Yep I wrote a blog post on it, just add border and you can change the height, font etc. http://webstori.es/normalise-select-html-tags-in-windows-and-mac/ – hcharge Sep 10 '13 at 14:57
This also works on Chrome Version 32.0.1700.102 on MacOS similar to Chi's answer with the webkit menu list option. – Joseph Coco Feb 16 '14 at 07:49

markashworth · Answer 6 · 2013-07-27T17:45:12.917

2

I used jQuery combobox for this.

With this, you can set the height of the necessary CSS classes to the height you need your select box to be.

edited Jul 27 '13 at 17:45

answered Mar 01 '12 at 16:25

markashworth

1,141
10
17

Thanks. I've changed it to a similar link. – markashworth Jul 27 '13 at 17:48

score 1 · Answer 7 · answered Sep 05 '12 at 00:33

1

You can increase the font-size to help with the height as well. I think that Safari mac show up to 16px font-size. At least gets a larger click region.

answered Sep 05 '12 at 00:33

estern

175
6
17

score 1 · Answer 8 · answered Aug 21 '13 at 12:37

1

Use line-height for safari its working.

answered Aug 21 '13 at 12:37

score 0 · Answer 9 · answered Mar 31 '10 at 06:41

0

Sample page works Google Chrome 4 and Safari 4

answered Mar 31 '10 at 06:41

Fatih Hayrioğlu

3,458
1
26
46

Works as in looks the same as in Firefox? Not for me. – crimson_penguin Apr 01 '10 at 06:05
Google Chrome - http://twitpic.com/1cc62p Safari - http://twitpic.com/1cc664 – Fatih Hayrioğlu Apr 01 '10 at 06:57
you can set the `select` tag class to `btn` then change it's height, using `css`, that's how I solved it(on mac) – Emma Aug 21 '15 at 22:31

score 0 · Answer 10 · answered Mar 15 '12 at 16:26

0

Simply set the height property. line-height worked in Safari on Windows, but not on Mac. height worked on both.

answered Mar 15 '12 at 16:26

Tony Pye

31
4

I have the same problem and the Chrome on Mac just doen't want to change it – Thea Mar 17 '12 at 09:21

How to standardize the height of a select box between Chrome and Firefox?

10 Answers10

Linked