::placeholder — как выровнять по центру в инпуте?

Question

[kepo]

Как выровнять по центру плэйсхолдер? В ФФ само по центру, как подровнять хотя бы в Хроме?


АПД. Выровнять естественно по вертикали - одинаковое расстояние сверхи и снизу. text-align: center; - не решение.

Ссылка - https://codepen.io/kodej/pen/JJXQZz?editors=1100

Comments

[Миша]

Залей пример на codepen

[kepo]

Миша: https://codepen.io/kodej/pen/JJXQZz?editors=1100

Answer 1

[Артур Карапетян]

line-height в высоту input-а

Comments

[kepo]

Не ровняет. Я в шоке.

[Александр Лысенко]

kepo: покажите в песочнице что у вас там, потому как padding и line-height должны помогать

[kepo]

AlexanderZe: https://codepen.io/kodej/pen/JJXQZz?editors=1100

[Александр Лысенко]

kepo: В вашем случае никак. Текст placeholder'a и основного текста имеет одну и ту же baseline, при этом приоритет на стороне основного текста.

[kepo]

AlexanderZe: поменять baseline никак? В Фаерфоксе работает как положено.

[Александр Лысенко]

kepo: вероятно особенности браузера. не думаю что это как-то можно изменить, разве что через position: absolute

[tyzberd]

AlexanderZe: через absolute плейсхолдер улетает всторону, если input добавить position: relative то absolute не работает.
а vertical-align: middle не прописать, потому что в хром добавляет display: block !important; joxi.ru/xAeek8XupxGXnA

[Александр Лысенко]

tyzberd: я боюсь что vertical-align вообще не поддерживается placeholder'ом. Оставляйте как есть, хотя бы для chrome через соответствующие префиксы

[kepo]

AlexanderZe: пробовал позишен абсолют, не работает оно для плейсхолдера корректно.

Answer 2

[Алекс Глебов]

https://codepen.io/SkiperX/pen/ggdzze
Если только так же его сделать
а по фокусу скрывать