Задать цвет плейсхолдеру (placeholder)

04.03.2020

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

Рассмотрим такой вариант input’а:

<input type="email" placeholder="Email">

Для изменения цвета placeholder пропишем такие правила в наш CSS:

/* Chrome, Firefox, Opera, Safari 10.1+ */
::placeholder {
  color: red;
  opacity: 1;
}

/* Internet Explorer 10-11 */
:-ms-input-placeholder {
  color: red;
}

/* Microsoft Edge */
::-ms-input-placeholder {
  color: red;
}

Рабочий пример кода с изменением цвета для placeholder в input:

See the Pen Set color to input placeholder by Denis (@deniscreative) on CodePen.dark

Полезная инфа:

Оставить комментарий