How to vertical-align text on this input box for I

Question

I have this code :

<input type="text" class="contactInput" value="my string">

.contactInput
{
    border:0;
    margin:0;
    padding:0;
    background-color:#000000;
    color:#ffffff;
    height:22px;
    width:290px;
    padding-left:5px;
}

and I'd like to vertical-align it. Firefox and Chrome do it automatically (as IE9). With IE8 or 7 is in the top.

How can I do it with CSS?

Answer 1

For webkit, its better to use paddings to avoid giant cursor, like that.

  line-height: 14px/*to enclose 13px font, override this if needed*/;
  height: 14px/*to enclose 13px font, override this if needed*/;
  /*Padding is needed to avoid giant cursor in webkit, which we get if
  height = line-height = 22px.*/
  padding: 6px 8px;

Answer 2

There is a problem with line-height in Chrome. When inline-height == height then chrome on picking edit box displays large cursor. When you start typing cursor decreases. Possible solution is to use paddings (top & bottom). In your case:

height: 18px;
padding-top: 4px;

Answer 3

Assuming you mean vertically align in the centre, you can use the line-height CSS property to do this. Simply set it to be the same as the height of the element.