How to increase the height of the select box

Question

Checkout 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?

Answer 1

I'm fairly certain this is impossible, at least in Safari. It just doesn't allow you to set the height of drop-down menus.

Answer 2

Sample page works Google Chrome 4 and Safari 4

Answer 3

try jqTranform. you'll have more control over the form elements.

Answer 4

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 future.

Answer 5

Increase the line-height