How to solve buggy line-height on input fields?

Issue

How do you give an input field, with fixed height, a cross-browser vertical alignment of the text it holds?

As of now, it seems line-height is my best option. However, on a webkit browser like Chrome or Safari, the cursor jumps to a top-alignment when copy/pasting.

I’ve noticed WordPress seems to have a solution for this, with their wp-login form.

Does anybody know how WordPress manages to do this?

CSS

input {
    width: 240px;
    height: 32px;
    line-height: 32px;
    font-size: 18px;
}

Solution

I use a set line-height for the whole document, vertical-align: middle for both labels and inputs and padding.
I also redefine font (family and size) for input, the same as for label because browsers already have their default like 13.3px…
Finally border: 1px solid someColor will help for browsers with 1 more px or an inset.

No height.

Then comes Chrome and its select. Oh @*$£#isellsoap forms.css nailed it, by removing and redefining everything, except it uses height and not padding (in my opinion it’s less versatile)

Answered By – FelipeAls

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published