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

R

10

46

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?

Ravelment answered 30/3, 2010 at 17:48 Comment(4)

try jqTranform. you'll have more control over the form elements. – Slowworm 31/3, 2010 at 8:9

Please consider changing the correct answer as the one with the highest votes is far more practical. – Principled 13/4, 2013 at 12:7

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... – Oxeyed 16/12, 2013 at 12:15

Makes sure to scroll down to the very bottom. Unfortunately the best answer is 2nd from last. – Psia 17/6, 2014 at 13:23

B

148

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.

Bannerol answered 19/6, 2010 at 15:1 Comment(5)

This should be the right answer. – Cateyed 22/8, 2011 at 21:6

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; } } – Acea 17/4, 2013 at 16:17

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). – Unprepared 19/5, 2013 at 9:41

I am using opacity: 0 and my own graphic on top, so this is perfect +1 – Biscuit 22/10, 2013 at 11:3

how do you set the css attribute ? – Utham 4/3, 2015 at 16:39

A

34

Increase the line-height.

Ales answered 31/8, 2010 at 6:14 Comment(4)

This stopped working in Mac Chrome 30.0.1599.69 – Constrained 8/10, 2013 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 – Rustication 24/10, 2013 at 15:53

@Constrained 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). – Cyprio 3/1, 2014 at 1:50

-1 line-height has no effect on FF Ubuntu 12. Increasing the font-size worked. – Nmr 25/3, 2014 at 16:26

C

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.

Campground answered 19/9, 2012 at 19:39 Comment(3)

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. – Geum 1/12, 2012 at 19:25

@antonm: I'm not sure how well jQuery combobox works on mobile. – Dark 28/1, 2013 at 14:32

@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 – Prothrombin 25/4, 2013 at 19:34

C

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 :).

Crossbred answered 29/8, 2013 at 2:51 Comment(2)

Same effect as -webkit-appearance: menulist-button; – Feil 18/3, 2015 at 11:2

Totally works. Chrome, Safari, Firefox. FTW! – Monterrey 18/7, 2016 at 13:22

R

8

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

Russian answered 19/7, 2013 at 11:0 Comment(3)

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. – Preiser 12/8, 2013 at 18:52

Yep I wrote a blog post on it, just add border and you can change the height, font etc. webstori.es/normalise-select-html-tags-in-windows-and-mac – Zoa 10/9, 2013 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. – Lethia 16/2, 2014 at 7:49

H

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.

Heraclitean answered 1/3, 2012 at 16:25 Comment(1)

Thanks. I've changed it to a similar link. – Heraclitean 27/7, 2013 at 17:48

T

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.

Throaty answered 5/9, 2012 at 0:33 Comment(0)

C

1

Use line-height for safari its working.

Carducci answered 21/8, 2013 at 12:37 Comment(0)

R

0

Sample page works Google Chrome 4 and Safari 4

Reach answered 31/3, 2010 at 6:41 Comment(3)

Works as in looks the same as in Firefox? Not for me. – Desdee 1/4, 2010 at 6:5

Google Chrome - twitpic.com/1cc62p Safari - twitpic.com/1cc664 – Holter 1/4, 2010 at 6: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) – Lifesaver 21/8, 2015 at 22:31

R

0

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

Retroflex answered 15/3, 2012 at 16:26 Comment(1)

I have the same problem and the Chrome on Mac just doen't want to change it – Burroughs 17/3, 2012 at 9:21

Recommended topics

Hot tags