Text in HTML input on FireFox 3.5 remains at top when height set

Question

We need bigger text inputs for our forms, so easy enough, we just set the height on them... But Firefox 3.5 then keeps the text at the top. How do I vertically center it? On Firefox 3.6, IE8, Chrome and Safari, the text is vertically centered as I hoped.

<form>
  <input type="text" style="height: 50px"/>
</form>

How do I make the text in this form centered in its input box?

Answer 1

Use padding instead...

input[type=text] {
   padding: 25px 0; /* experiment with padding */
}

or

Use the line-height hack... (only works with single line inputs, not textareas)

input[type=text] {
   line-height: 50px;
   height: 50px;
}