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 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.

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/