H3XED

HTML Input Field Consistent Cross-Browser Height And Vertical Alignment

Please note that this post is over a year old and may contain outdated information.
The way HTML input fields are rendered varies even among modern browsers. Internet Explorer is notorious for not vertically-aligning input text if you don't use the right CSS, but even Chrome and Firefox differ in certain circumstances. Text might be vertically aligned in one browser, but then in another might look like this:

IE Vertical Align Input


CSS Fix


To get your input fields to render consistently across all browsers, with pixel-perfect height and vertically-centered text, you need to use both height and line-height, and avoid vertical padding. You'll also want to supply your own horizontal padding. Here is an example:

.input {
    height: 35px;
    padding: 0 6px;
    line-height: 35px;
}

This is tested all the way back to Internet Explorer 6 and works consistently.

Chrome 38 introduced a regression bug that causes odd behavior when using line-height. It is fixed in the latest Chrome version 39.



More Details


The reason you need both height and line-height is because height controls the height of the input field, while line-height controls the height of the text inside. If the line-height is too large relative to the input field height, the text will be pushed outside of the field.

You need horizontal padding so the text doesn't sit directly against the ends of the input field.
Share This Post
Twitter

Comments (1)

lxl   Sep 11, 2018
However, this method can cut the top edge of chinese characters
Share This Post
Twitter
H3XED © Nick Vogt   RSS   Policies   Twitter