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

Issue

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 independently of the font size.

However, there seems to be some sort of minimum line-height (or something causing a similar affect) on the input value, that seems to push the text down somehow that prevents the identical styling.

Example HTML:

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

CSS:

div {
  line-height: 50px;
  font-family: Arial;
}

input,
span {
  font-size: 50px;
  line-height: 50px;
  height: 50px;
  width: 100px;
  padding: 0;
  min-height: 0;
  display: inline-block;
  font-family: inherit;
  border: 2px solid red;
  overflow: hidden;
  vertical-align: top;
}

And the results can be seen at

http://plnkr.co/edit/oHbhKDSPTha8ShWVOC7N?p=preview and in the following screen shot from Chrome 44.0.2403.155 (64-bit) on Linux:

Strangely, the placeholder seems to be styled with the desired line-height, while the text value of the input is positioned differently. I'm not concerned with the colour of the placeholder at this point.

How can I style all 3 elements so the text is in the same position, where I'm using a custom line-height?

I understand I can just set the line-height to normal or 1.2, or reduce the font size, to make the elements appear identically, but they would not have the visual appearance I'm looking for.

Solution

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 effect on the input but we can fix the element height and hide the overflow to give it a consistent (albeit imperfect) 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/

Answered By - Moob