Стилизация текста-заполнителя с помощью CSS

Development | Amber | Комментировать запись

Как вы знаете, чаще всего текст-заполнитель автоматически наследует семейство и размер шрифта обычного вводимого текста. Однако в некоторых ситуациях возникает необходимость изменить цвет текста-заполнителя. В CSS это можно сделать с помощью псевдоэлемента ::placeholder.

В целом CSS-псевдоэлемент ::placeholder представляет текст-заполнитель в элементе <input> или <textarea>. Селектор placeholder поддерживает только подмножество свойств CSS, которые применяются к псевдоэлементу ::first-line.

Давайте рассмотрим следующий пример. В приведенном ниже коде мы определим для текста-заполнителя собственный цвет, а также переопределим унаследованный размер шрифта, сделав его меньше. Вот наш базовый стиль ввода:

input[type="text"] {
  font-family: monospace;
  font-size: 20px;
  color: peru;
}

А вот стилизация текста-заполнителя: 

::-webkit-input-placeholder {
  color: peachpuff;
  font-size: 13px;
}
::-moz-placeholder {
  color: peachpuff;
  font-size: 13px;
}
:-ms-input-placeholder {
  color: peachpuff;
  font-size: 13px;
}
::placeholder {
  color: peachpuff;
  font-size: 13px;
}

К сожалению, как вы можете видеть, псевдлоэлемент ::placeholder на данный момент требует множества вендорных префиксов.

Читайте также: Как использовать Google Fonts на своем сайте