HTML5, Placeholder, высоту строки в Webkit

У меня есть поле ввода:

<input type="text" placeholder="whatever">

со стилями:

input {
    margin: 0;
    padding: 0 6px;
    font-size: 19px;
    line-height: 19px;
    height: 36px;
    width: 255px;
}

Проблема заключается в том, что высота строки не вступает в силу для placeholder в webkit CHROME. поэтому текст в поле ввода выравнивается уродливым способом. Кто-нибудь еще видел это и теперь, как его исправить?

Спасибо

Ответы

Ответ 1

Глядя на ваши теги, я предполагаю, что вы пишете что-то вроде...

<input type="text" placeholder="whatever">

К сожалению, Chrome связывает ваши руки, когда дело доходит до стилизации заполнитель, селектор выглядит так:

input::-webkit-input-placeholder {}

Вы можете найти варианты стиля, gotchas и поддерживаемые браузеры в Стилирование места размещения HTML

Ответ 2

Заполнители полей ввода, похоже, не любят значения высоты строки пикселя, но это будет вертикально центрировать его на входе:

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

Ответ 3

Похоже, что удаление вашего объявления высоты строки полностью работает. Он работал у меня в FF7, Chrome15 и Safari 5.1. Также хорошо выглядел в IE9 и FF3.6, но не выглядит хорошо в IE8.

Ответ 4

Я не думаю, что могу полностью воспроизвести вашу проблему, но, возможно, вы можете исправить ее, используя padding: 7px 6px;. Для этого нужно надеяться, что верхнее и нижнее дополнение будет равно 7px, что в значительной степени выполняет аналогичную работу line-height. С разными размерами (ширина/размер шрифта) вы должны иметь возможность выбрать подходящее дополнение, вычислив (height - fontsize) / 2, возможно, дать или взять пиксель или два для совершенства.