Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Tags:

css

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?

like image 520
Neeraj Singh Avatar asked Mar 30 '10 17:03

Neeraj Singh


People also ask

How do you change the height of a selection box?

Since the priority is given to the inline-styling, you can use this trick to increase the height of your select list. All you have to do is add inline-style in the select tag.

How do you override height in CSS?

To override a set height in a CSS element, you can simply put this in the inherited element (either in a style block or inline): height: auto; This will override the set value inherited, without statically setting a new one.


2 Answers

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.

like image 164
Chi Avatar answered Sep 18 '22 18:09

Chi


Increase the line-height.    

like image 36
Praveen Vijayan Avatar answered Sep 19 '22 18:09

Praveen Vijayan