Размер шрифта-заполнителя размером более 16 пикселей

Я прочитал пару статей о стилизации заполнителя поля ввода, используя ::-webkit-input-placeholder в HTML5. Он отлично работает, за исключением одного.

Если я попытаюсь увеличить размер шрифта до значения, превышающего 16 пикселей, текст будет "вырезан" внизу. Это происходит независимо от высоты и заполнения самого входа. Кто-нибудь знает способ избежать этой проблемы, используя чистый CSS или javascript?

Я добавил скриншот из двух полей ввода, где заполнители имеют размер шрифта 20 пикселей

Jsfiddle: https://jsfiddle.net/bvwdg86x/

Ответ 1

Ввод и его заполнитель должны иметь соответствующие стили шрифта

input {
    width: 400px;
    padding: 0 20px;
}

input,
input::-webkit-input-placeholder {
    font-size: 20px;
    line-height: 3;
}

<input type="text" placeholder="My Cool Placeholder Text">

Ответ 2

Стили-заполнители не изменят размер поля ввода и не повлияют на его модель окна. Добавьте размер шрифта на ваш вход, чтобы зафиксировать местозаполнитель от обрезания.

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

::-moz-placeholder {} /* Firefox 19+ */
:-moz-placeholder {}  /* Firefox 18- */
:-ms-input-placeholder {} /* IE */

Ответ 3

input {
    width: 450px;
    padding: 0px 15px;
}

input,
input::-webkit-input-placeholder {
    font-size: 25px;
    line-height: 4;
}

<input type="text" placeholder="My Cool Placeholder Text">

Ответ 4

Тем временем производители браузеров внедрили ::placeholder.

Вы можете найти текущее состояние совместимости браузера на caniuse.com.

В настоящее время (2019-04-29) имеются следующие заметки:

:: - webkit-input-placeholder для Chrome/Safari/Opera (выпуск Chrome # 623345)

:: - ms-input-placeholder для Edge (также поддерживает префикс webkit)

Ответ 5

Вы должны добавить 'overflow: visible' для заполнителя в вашем CSS, чтобы избавиться от обрезки.

::placeholder{
overflow: visible;
}