WillyC WillyC - 1 month ago 4
CSS Question

How does CSS height get applied to input fields?

I'm having some difficulty understanding how the css height property is applied to

input
fields when i use
em
as a unit.

Take a look at this jsfiddle: jsfiddle

If the
em
value is equal to the base font size examples one and three should be the same height. If
em
is based on what the font size is set to in the element (which I believe is correct), then examples one and two should be the same size. As it is, none of these items are the same size. If I set the height to
px
then I can force them to all be the same size.

What is coming into play that makes all of my input boxes a different size?

CSS:

.one {
max-height:3em;
height: 3em;
font-size:1em;
vertical-align: top;
}

.two {
max-height:6em;
height: 6em;
font-size: 0.5em;
vertical-align:top;
}

.three {
max-height:3em;
height: 3em;
font-size: 0.5em;
vertical-align:top;
}


HTML:

<input type="text" class="one" placeholder="one">
<input type="text" class="two" placeholder="two">
<input type="text" class="three" placeholder="three">

Answer

This actually seems like a bug in Chrome / Safari. Firefox and Opera renders them correctly.

One way to fix this so it renders the same in all browsers, are to use rem instead of em: https://www.sitepoint.com/understanding-and-using-rem-units-in-css/

However, this has other potential pitfalls and implications

Comments