How to solve buggy line-height on input fields?
css, html, wordpress
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)
Problem
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; } ```