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
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.