+7 (812) 9-515-415

Как задать цвет placeholder на CSS

К полям формы добавляют специальный атрибут placeholder, в котором указывают подсказку, в каком виде ожидаются данные

Атрибут placeholder работает со следующими типами ввода:

  • текст
  • поиск
  • URL
  • телефон
  • e-mail
  • пароль

Обратите внимание, что placeholder не заменяет собой label. В label пишется описание поля, а в placeholder формат данных.

Пример кода для изменения цвета placeholder


::placeholder {
  color: #333;
}

Некотрые коиенты хотят, чтобы текст из placeholder исчезал не при начале ввода текста, а при получении полем фокуса. Для этого при фокусе можно задать прозрачный цвет для placeholder


input::placeholder {
  color: #333;
}
input:focus::placeholder {
  color: transparent;
}
textarea::placeholder {
  color: #333;
}
textarea:focus::placeholder {
  color: transparent;
}

Для совместимости с различными версиями браузеров не забывайте пользоватся автопрефиксером.

Часто текст в placeholder делают очень светло-серым, а это противоречит 1.4.3 Критериев доступности для веб-материалов (WCAG). Не забывайте о том, что текст должен иметь контрастность цвета не менее 4,5: 1

К размышлению
Оглавление