Текст-заполнитель в Safari не центрирован по вертикали

Question

Есть ли у вас какие-либо идеи о том, как получить атрибут местозаполнителя по центру в сафари?Хотя, когда вы начинаете печатать, текст идеально отцентрирован.

Answer 1

Самый простой способ - использовать CSS-свойства line-height и height.Просто введите для ввода текста line-height с тем же значением, что и для height.

Кстати, ваш живой сайт выглядит нормально для меня в chrome 16.

Answer 2

Для меня лучшим решением является использование line-height: normal и hack для IE 8.

<input type="text" name="test_name" placeholder="Search">


input {
    height: 35px;
    line-height: normal;
    line-height: 32px\0/; /* for IE 8 */
}

Answer 3

-Safari Solution-

Я застрял в этом вопросе надолго, несмотря на использование

input::-webkit-input-placeholder { line-height:normal!important; }

Оказывается, что наличие высоты строки в непосредственном элементе input нарушало мою input::webkit-input-placeholder высоту строки.

Решение расширено:

Я удалил высоту строки в своем стиле ввода, и это исправило мою проблему.

Answer 4

Был ли этот баг тоже.Установка высоты строки в ems исправила это для меня.Он выглядит одинаково в Chrome, Safari (для настольных ПК и iOS) и Firefox.и я добавил трюк \ 9, чтобы получить вертикальное центрирование в IE.вот мой css

height: 36px;       
line-height: 1.2em;
line-height: 26px\9; /*for IE */

Answer 5

У меня отлично работает:

<input type="text" name="first_name" placeholder="Search" style="height: 50px;">

Попробуйте изменить это:

#register-block-fields input {
width: 230px;
height: 41px;
padding-left: 40px;
padding-right: 20px;
height: 41px; // Changed from line-height
color: #878787;
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
background: none;
}

Answer 6

Для меня это работало хорошо:

line-height: inherit;