Text input on Chrome: line-height seems to have a minimum

Question

I\'m trying to style a text input with a value, text input with a placeholder, and a span, identically in Chrome. Specifically, I would like to control the line-height indep

Answer 1

I think I've done it!!!

In my testing it seems that line-height must be at least ~115% of font-size, so if you want 50px high element you must have ~43px for things to all line up:

Fig 1. Font-size 86% of 50px line-height. Things line up but are not honouring the 50px font size requested by OP.

input, span {
    border: 2px solid red;
    display: inline-block;
    font: 43px Arial;
    line-height: 50px;
    padding: 0;
    vertical-align: middle;
	width: 100px;
    outline-style:none;
    box-shadow:none;
    overflow:hidden;
    /* optional - to include the borders in the element size: 
    box-sizing:border-box;
    */
}

<input type="text" value="Text">
<input type="text" placeholder="Text">
<span>Text</span>

If you increase the font size to the desired 50px then the minimum line-height respected by the input box is ~58px. Any attempt to offset this with vertical alignment had no affect in the input but we can fix the element height and hide the overflow to give a consistent (albeit not entirely respectable) appearance:

Fig 2. 50px text forcing a line height of 58px which is clipped with overflow hidden.

input, span {
    border: 2px solid red;
    display: inline-block;
    font: 50px Arial;
    line-height: 58px;
    padding: 0;  
    height:50px;
    vertical-align: top;
    width: 100px;
    outline-style:none;
    box-shadow:none;
    overflow:hidden;
    /* optional - to include the borders in the element size: 
    box-sizing:border-box;
    */
}

<input type="text" value="Text">
<input type="text" placeholder="Text">
<span>Text</span>

Close, but no cigar. But that got me thinking - perhaps a pseudo element might be less restrictive? I found that that you can style the input::first-line pseudo even within an input and that this will respect the height, font size, line-height and vertical alignment!

Thus voilà!

Fig 3. First-line pseudo element for the win!

input, span {
    border: 2px solid red;
    display: inline-block;
    font: 50px Arial;
    line-height: 50px;
    height: 50px;
    padding: 0;
    vertical-align: middle;
    width: 100px;
    outline-style:none;
    box-shadow:none;
    overflow:hidden;
    /* optional - to include the borders in the element size: 
    box-sizing:border-box;
    */
}
input::first-line, span::first-line {
    vertical-align: middle;
}
/* weirdly the placeholder goes black so we have to recolour the first-line */
input::-webkit-input-placeholder::first-line {
    color:grey;
}

<input type="text" value="Text">
<input type="text" placeholder="Text">
<span>Text</span>

Here's a jsFiddle of the lot so you can see my working out. ;)

https://jsfiddle.net/romz58cc/4/

Answer 2

Line height to 1.2 value (that's 120% of font size) works perfectly in chrome

http://plnkr.co/edit/rJmXLRrGFpi46Vv5THm5?p=preview

  div, input, span {
      line-height: 1.2;
  }

The only change that I make it's change the two line heights of 50 pixels to 1.2. It doesn't breaks the layout and the three elements are aligned fine.

So your original code works fine in firefox.