vertical aligning text within dropdown or text input?

Question

i have text input and select boxes be at a width of 40px... i want the text within these elements to be in the bottom half of the input field. I have successfully been able to do this in firefox (but NOT safari or chrome) by setting padding-top: 20px.

i need this to work for safari and chrome however, these browsers seem to auto vertical align the text to the middle.

is there a solution to this? thank you!

Answer 1

You can use your padding code. To make it work in Safari/Chrome/Opera, add line-height: 40px (or any height your field has). All the browsers seem to recognize the padding then.