Как задать высоту текстового поля ввода в CSS?

Попробуйте использовать padding и line-height. Например:

input[type="text"] { 
    padding: 20px 10px; 
    line-height: 28px; 
}

Этот код задает внутренние отступы для текстового поля ввода и устанавливает высоту строки, что может помочь улучшить его визуальное восприятие и взаимодействие с пользователем.

Стилизация форменных элементов кроссбраузерно действительно может быть сложной задачей. Некоторые браузеры могут игнорировать правило CSS height, в то время как другие его honor.

Вы можете попробовать использовать line-height (иногда понадобится добавить display: block; или display: inline-block;), а также отступы сверху и снизу. Если ни один из этих подходов не сработает, то, по сути, у вас не останется других вариантов - можно использовать графику, разместить input по центру и установить border: none;, чтобы визуально казалось, что элемент формы большой, хотя на самом деле это не так...

Вам следует использовать свойство font-size для контроля высоты текста, так как оно широко поддерживается всеми браузерами. Для добавления отступов используйте padding.

Например:

.inputField {
  font-size: 30px;
  padding-top: 10px;
  padding-bottom: 10px;
}

Таким образом, вы сможете управлять высотой и добавлять необходимое пространство вокруг текста.

Не используйте свойство height для полей ввода.

Пример:

.heighttext {
    display: inline-block;
    padding: 15px 10px;
    line-height: 140%;
}

Всегда используйте свойства padding и line-height в CSS. Это будет отлично работать на всех мобильных устройствах и во всех браузерах.

Самый лучший способ сделать это следующий:

input.heighttext {
  padding: 20px 10px;
  line-height: 28px;
}

Данный стиль добавит отступы и установит высоту строки для вашего элемента input с классом heighttext.