Firefox does not vertically center selected input content with specified height

Question

here is an image of what is happening:

http://imageshack.us/photo/my-images/217/ffbug.png/

here is my code:

select { width: 150px; height: 40px; padding-left: 10px; } 

in chrome and firefox, it vertically aligns the selection values ​​perfectly. in firefox, the values ​​get stuck at the top of the selection.

I tried to add vertical-align: middle and line-height: 40px , both of which did not change anything.

Answer 1

I decided to put it in a div with this code:

 .search li select { padding: 0px; margin: 0px; } .search li div { height: 32px; padding: 10px 10px 0px 10px; background: #ffffff; } 

The div background is similar to the selection background.

its pretty well concentrated in FF IE and chrome, only the arrow is inside the gasket, and also ... well ... sometimes you cannot win, I think.

Answer 2

Just use padding-top: 10px; padding-bottom: 10px; padding-top: 10px; padding-bottom: 10px; for this item. Your text will be automatically centerd.

Answer 3

Try this CSS code:

 @-moz-document url-prefix() { select { padding-top: 13px; } } 

This should work if you need multi-browser support.