Как правильно сверстать и стилизовать эти инпуты?

Question

[Виталий Казак]

В основном что не получается, это стилизация placeholder. Когда высоту инпута меняю, то placeholder остаётся в середине. При нажатии на него, ввод начинается вообще прямо возле границы инпута.

Comments

[FeST1VaL]

Используйте падинги
Для стилизации placeholder input::-webkit-input-placeholder

[Ankhena]

Когда высоту инпута меняю

Не задавайте высоту, используйте padding

то placeholder остаётся в середине. При нажатии на него, ввод начинается вообще прямо возле границы инпута.

Вероятно, вы задавали отступы плейсхолдеру, а не инпуту.

Остальное - в песочницу на jsfiddle.net