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

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

Try like this

As per the link:Firefox line-height issue with input fields

line-height on input won't change unless you change the font-size

so reduce the font-size:50px to 45px it will look fine.

Code Below

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

span,input[type="text"],input[placeholder]{ 
height: 50px; 
width: 100px; 
padding: 0; 
min-height: 0; 
display: inline-block; 
font-family: inherit; 
border: 2px solid red; 
overflow: hidden; 
vertical-align: top; 
font-size:45px; 

} 

::-webkit-input-placeholder { 
color:#000000; 

}

Answer 2

Why is this happening?

This misalignment is being caused by the caret and as such I don't think you will find a way to align the text if the font-size and line-height are the same.

Why is the caret at fault?

The caret has a height greater than the text which is causing the alignment to be skewed.

There are a few things which support this:

1. You can see the size of the caret

• Click into the input and hold the left mouse button. Drag up and down and you will see that the text will move
• Remove height: 50px; from input, span. The size of the input will now increase to the height of the caret

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

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

2. The placeholder text is correctly aligned

• The placeholder text is not effected by the caret so is correctly aligned
• As soon as text is added to the input the alignment is thrown off

The result of the caret having a greater height is that the line-height is being artificially increased causing the text to be out of line.

This can be proven by:

• Changing line-height to 58px. The alignment of the placeholder text and span will be the same as the input

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

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

• Changing font-size to 45px. The caret will now fit in the 50px height

div {
  line-height: 50px;
  font-family: Arial;
}
input, span {
  font-size: 45px;
  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;
}

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

What can be done?

As there is no way to style the caret itself (to make it smaller) the most efficient way of ensuring the text is aligned would be to use a font-size which is smaller than the line-height. This will in turn make the caret smaller and stop it from artificially increasing the line-height of the input.

div {
  line-height: 50px;
  font-family: Arial;
}
input, span {
  font-size: 45px;
  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;
}

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

Alternatively you could remove height and just specify a line-height equal to the height of the caret:

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

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