Изменение цвета текста placeholder в HTML с помощью CSS

Быстрый ответ

Для измениния цвета placeholder'а вашего input'а в разных браузерах с помощью CSS вы можете использовать следующий код:

/* Для современных браузеров */
::placeholder {
  color: red; /* Вкус клубники? Да, пожалуйста! 🍓 */
}

/* WebKit: Chrome, Safari, Opera 15+ */
::-webkit-input-placeholder {
  color: red; /* В WebKit разбираются в делах! */
}

/* Firefox 19+ */
::-moz-placeholder {
  color: red;
  opacity: 1; /* Эй, Firefox, не делай моих детей прозрачными! */
}

/* IE 10+, Edge */
:-ms-input-placeholder {
  color: red; /* Даже IE решил присоединиться к вечеринке */
}

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

Глубокое погружение: что еще стоит учесть?

Стилизация placeholder'а может быть затруднительной. Давайте разберемся в этом подробнее:

Необходимость выбора доступных цветов

При выборе цветов, обеспечьте хороший контраст с фоном input'а. Это важно как с эстетической точки зрения, так и для облегчения чтения людьми со слабым зрением. Согласно Руководству по доступности контента в сети (WCAG), контрастное соотношение цвета вашего текста и его фона должно быть не менее 4.5:1.

Подробнее об этом расскажет наш спикер на видео

Оставьте пространство для переводов

Текст placeholder'а должен учитывать особенности перевода на другие языки. Поверьте, на немецком (который может быть очень длинным!), ваше сообщение может выглядеть так, как будто оно переполняет доступное пространство.

Равномерность браузеро-специфических стилей

Знаете, как каждый браузер стремится быть уникальным и создавать проблемы? Давайте будем честными и сделаем стили одинаковыми для всех:

input {
  -moz-appearance: textfield;   /* Эй, Firefox, будь немного мягче! */
  -webkit-appearance: textfield; /* Chrome, Safari, учтем и вас! */
  appearance: textfield;         /* И поделимся любовью со всеми */
}

Возможные сложности с кросс-браузерной совместимостью

Не забывайте золотое правило веб-разработки: "Всегда тестируй всё!". С -webkit-input-placeholder специфичным для браузеров WebKit, каждый браузер может воспринять стили вашего placeholder'а, по-своему, особенно когда вы используете атрибуты border или background-color.

Если возможно, избегайте !important

И, кстати, по возможности, избегайте !important. Это может показаться магическим решением всех проблем, однако в действительности может приводить к большим проблемам.

Placeholder и label: это разные вещи!

Не используйте placeholder вместо элемента label. Они выполняют разные функции: label предоставляет доступное название для элементов формы, тогда как placeholder служит как рассказчик, дающий полезные подсказки.

Визуализация

Давайте визуализируем, как CSS меняет цвет placeholder'а:

Стандартный HTML Input: [___________]
Цвет Текста Placeholder'а: 🎨 "светло-серый"

Приходит художник CSS:

input::placeholder {
  color: green; /* 🎨 Оттенки зеленых джунглей */
}

Убедитесь в результате:

Input со стилями CSS: [____🎨зелёный____]

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

input:hover {
  border: 1px solid green; /* При наведении поле ввода начинает играть новыми красками */
}

Доводка внешнего вида placeholder

Теперь пришло время последнего штриха для стилизации placeholder'ов. Давайте проведем вас по тайной тропе CSS-трюков:

Анимация переходов

Сделайте интерфейс более живым, добавив переходы для изменения цвета при получении фокуса:

input::placeholder {
  transition: color 0.3s ease; /* Добавим драматизма */
}
input:focus::placeholder {
  color: blue; /* Оно только что изменило цвет? Я, кажется, влюбился 😍 */
}

Адаптация под мобильные устройства

Не забывайте о необходимости тестирования ваших input'ов и placeholder'ов на мобильных устройствах. Мобильные браузеры могут отображать различные стандартные размеры шрифта для placeholder'ов, и это может вызвать "эффект гриба" 🍄. Настройте все соответствующим образом!

Super Saiyan уровень предобработки

Освойте силу CSS-препроцессоров, таких как Sass или Less. Их суперспособности в виде миксинов определённо помогут вам выделиться, особенно при работе с кросс-браузерной стилизацией placeholder'ов. Вот пример простого миксина в Sass:

@mixin placeholder-color($color) {
  ::placeholder { 
    color: $color; 
  }
  @include vendor-prefixes((-webkit,-moz,-ms), input-placeholder, (color: $color));
}

input {
  @include placeholder-color(purple); /* Purple rain, purple rain 🎶 */
}

Полезные материалы

1. ::placeholder – CSS: Cascading Style Sheets | MDN — Детальная документация от MDN для стилизации псевдо-элемента ::placeholder.
2. How To Change Input Placeholder Color – W3Schools — Понятное руководство по изменению цвета placeholder'а.
3. ::placeholder | CSS-Tricks – CSS-Tricks — Обстоятельные руководства и советы по работе с псевдо-элементом ::placeholder.
4. "::placeholder" | Can I use... Support tables for HTML5, CSS3, etc — Проверьте поддержку placeholder'а различными браузерами для гарантированной совместимости.
5. Change an HTML input's placeholder color with CSS – Stack Overflow — Кладезь общественных решений и обсуждений.
6. ::placeholder | Codrops — Глубокий анализ псевдо-элемента ::placeholder от Codrops.
7. Just a moment... – CodePen — Интерактивные примеры стилизованных placeholder'ов в различных проектах на CodePen.