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;
}
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)
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With