Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to solve buggy line-height on input fields?

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;
}
like image 208
jlmmns Avatar asked Sep 19 '25 01:09

jlmmns


1 Answers

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)

like image 195
FelipeAls Avatar answered Sep 20 '25 17:09

FelipeAls