Line-height не работает некорректно в элементе input по нескольким причинам.
Во-первых, input является одним из так называемых "replaced elements" или "замещаемых элементов". Замещаемые элементы ведут себя немного иначе, чем обычные элементы, такие как div или p. Они представляют собой элементы, содержимое которых генерируется браузером, а не является прямой частью разметки HTML. В случае input, его содержимым является текст, введенный пользователем, и этот текст не доступен для стилизации с помощью CSS. Браузеры обрабатывают внешний вид input'а с использованием собственных стилей, что может снизить возможность контроля над line-height.
Во-вторых, многие браузеры имеют свои собственные стили по умолчанию для элемента input, которые имеют приоритет над стилями, заданными в CSS. Например, Chrome и Firefox могут применять свойство line-height к внутреннему содержимому input'а, что может повлиять на его отображение и привести к некорректной работе указанного свойства.
Есть несколько способов решить эту проблему:
1. Использовать псевдоэлемент ::placeholder, чтобы задать отдельные стили для пустого состояния input'а. Например:
input::placeholder {
line-height: 1.5;
}
Это позволит корректно задать line-height для отображения плейсхолдера внутри input'а.
2. Использовать другие свойства CSS, такие как padding или height, чтобы контролировать высоту элемента input. Например:
input {
padding: 5px;
height: 30px;
}
Это поможет достичь желаемого отступа между строками, влияя на общую высоту input'а.
3. Использовать JavaScript, чтобы визуально преобразовать input и задать ему желаемое поведение и стиль. Например, вы можете создать собственный элемент с использованием div и стилизовать его так, как вам нужно, а затем использовать JavaScript, чтобы отслеживать изменения в нем и передавать их внутри скрытого input'а.