Я пытаюсь создать текстовый ввод со значением, текстовым вводом с помощью заполнителя и диапазоном, идентичным в Chrome. В частности, я хотел бы контролировать высоту линии независимо от размера шрифта.
Однако, по-видимому, на входном значении кажется какая-то минимальная высота линии (или что-то, что вызывает подобный аффект), что, как представляется, толкает текст так или иначе, что предотвращает идентичный стиль.
Пример 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;
}
И результаты можно увидеть на
http://plnkr.co/edit/oHbhKDSPTha8ShWVOC7N?p=preview и в следующем скриншоте из Chrome 44.0.2403.155 (64-разрядная версия) в Linux:
Как ни странно, местозаполнитель представляется в стиле с требуемой высотой строки, тогда как текстовое значение ввода расположено по-разному. На данный момент меня не интересует цвет заполнителя.
Как я могу стилизовать все 3 элемента, чтобы текст находился в том же положении, где я использую пользовательскую высоту строки?
Я понимаю, что я могу просто установить высоту строки normal или 1.2 или уменьшить размер шрифта, чтобы элементы выглядели одинаково, но у них не было бы визуального внешнего вида, который я ищу.
