Как изменить цвет placeholder textarea

У элементов ввода есть атрибут «placeholder». С его помощью можно вывести текст в поле ввода который исчезает при начале заполнения. Браузеры по разному отображают плейсхолдер, а устаревшие — вовсе не поддерживают. Однако, существуют способы обхода всех недостатков этого полезного атрибута. Рассмотрим следующие моменты:

• изменение стиля плейсхолдера;
• скрытие сразу при нажатии на поле;
• отображение в браузерах, которые не поддерживают атрибут.

Для примера возьмём текстовое поле input и будем применять к нему стили.

Изменение цвета placeholder

Браузеры на разных движках по разному отображают плейсхолдер. Чаще всего это чёрный текст с прозрачностью, что в итоге смотрится как серый. Чтобы изменить цвет и прозрачность необходимо в CSS стилях к элементам ввода указывать дополнительные директивы для движков браузеров. Изменим цвет на красный без прозрачности.

<style>
  ::-webkit-input-placeholder {color:#f00; opacity:1;}/* webkit */
  ::-moz-placeholder          {color:#f00; opacity:1;}/* Firefox 19+ */
  :-moz-placeholder           {color:#f00; opacity:1;}/* Firefox 18- */
  :-ms-input-placeholder      {color:#f00; opacity:1;}/* IE */
</style>

<input type="text" placeholder="Начните вводить текст" value="" />

Если не указать «opacity», то цвет в браузерах, поддерживающих прозрачность, будет розовым. Так же можно указать для разных полей разные цвета. Для этого используйте классы.

 .input-1::-webkit-input-placeholder { color:red; }
 .input-2::-webkit-input-placeholder { color:green; }
 ...
 и.т.д.

Убираем placeholder при нажатии на поле

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

  :focus::-webkit-input-placeholder {opacity:0;}/* webkit */
  :focus::-moz-placeholder          {opacity:0;}/* Firefox 19+ */
  :focus:-moz-placeholder           {opacity:0;}/* Firefox 18- */
  :focus:-ms-input-placeholder      {opacity:0;}/* IE */

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

Кроссбраузерность placeholder

Устаревшие браузеры не поддерживают атрибут «placeholder» — он просто не будет отображаться. К таким браузерам относится IE8. Несмотря на прекращение поддержки Internet Explorer, есть «люди» которые им пользуются. Если плейсхолдер не несёт важной информации, то можно забить на его отображение, но если увидеть содержимое подсказки должен каждый, то разработчик обязан позаботиться о полной кроссбраузерности.

Для отображени подсказки в браузерах, которые не поддерживают атрибут, будем использовать jquery плагин.

Скачать «jquery.placeholder»

Скачиваем его и подключаем. Не забываем, что должна быть подключена так же jquery библиотека. Применяем плагин к элементам ввода с атрибутом «placeholder»:

    <script src="/jquery.placeholder.min.js"></script>
    
    <script>
        $(function(){
            $('input[placeholder], textarea[placeholder]').placeholder();
        });
    </script>
    
    <style>
        input.placeholder, textarea.placeholder. { color: green; }
    </style>

Плагин срабатывает только если браузер не поддерживает плейсхолдеры. В таком случае элементам, к которым он применён, присваивается класс «placeholder», а в «value» записывается текст из атрибута «placeholder». При фокусе «value» очищается. Чтобы текст из атрибута не выглядел точно так же как вводимый текст, оформляем его с помощью стилей, опираясь на устанавливаемый класс. В примере цвет текста неактивного поля будет зелёным. Но увидеть это можно только в IE8 или других устаревших браузерах.

Исчезающая подсказка в <input> и <textarea> HTML

Внутри пустого поля ввода <input> или <textarea>, то есть пока атрибут value пустой или отсутствует, показывается надпись приглушенного цвета из атрибута placeholder, которая пропадает при вводе первого символа. Она может быть образцом значения или кратким описанием ожидаемого формата. [whatwg.org]

<input placeholder="текст-подсказка">
<textarea placeholder="текст-подсказка"></textarea>

Стремясь уменьшить форму и сократить визуальный шум, дизайнеры тег <label> заменяют на атрибут placeholder, тем самым увеличивая нагрузку на кратковременную память. Людям с нарушенным зрением подсказку трудно прочитать. Лучше разместить <label> непосредственно над полем ввода. Пустое поле легче распознаётся как элемент, требующий заполнения. [uxdesign.cc]

Стилизация: изменить цвет placeholder CSS

Псевдоэлемент ::placeholder CSS определяет внешний вид подсказки из атрибута placeholder. Список поддерживаемых свойств ограничен тем же списком, что псевдоэлемент ::first-line [csswg.org] и на текущий день не включает плавный переход transition.

<style>
.raz::placeholder {
  color: red;
  opacity: 1; 
}
</style>

<input placeholder="текст-подсказка" class="raz">
<textarea placeholder="текст-подсказка" class="raz"></textarea>

Поменять стиль поля ввода с placeholder CSS

Селектор [placeholder] определяет внешний вид элементов, у которых задан атрибут placeholder.

<style>
[placeholder] {
  background: linear-gradient(to right top, bisque 50%, cornsilk 50%);
}
</style>

<input>
<textarea></textarea>
<input placeholder="текст-подсказка">
<textarea placeholder="текст-подсказка"></textarea>

Псевдокласс :placeholder-shown CSS определяет внешний вид поля, пока видна подсказка из атрибута placeholder.

<style>
.raz:placeholder-shown {
  background: linear-gradient(to right top, bisque 50%, cornsilk 50%);
}
</style>

<input placeholder="текст-подсказка" class="raz">
<textarea placeholder="текст-подсказка" class="raz"></textarea>

Подсказка пропадает при получении фокуса <input type="text | password | другие"> и <textarea></textarea>

<style>
.raz:focus::placeholder {
  opacity: 0;
}
</style>

<input placeholder="текст-подсказка" class="raz">
<textarea placeholder="текст-подсказка" class="raz"></textarea>

В конце длинного обрезанного подсказывающего текста поставить многоточие

<style>
.raz:placeholder-shown {
  text-overflow: ellipsis;
}
</style>

<input placeholder="Обязательно заполняется при наличии" class="raz">

<style>
.raz:placeholder-shown {
  text-overflow: "1F4E7"; 
}
</style>

<input type="email" class="raz6" placeholder="name@site.ru                        ">

Текст в плейсхолдер должен быть коротким, иначе он не имеет смысла, так как его никто не сможет увидеть.

Сделать смещающиеся или всплывающие <label> в <form>

Email

<style>
.raz {
  position: relative;
}
.raz span {
  position: absolute;
  bottom: 0;
  left: 2px;
  opacity: .5;
  visibility: hidden;
  transition: .2s;
}
.raz input:placeholder-shown ~ span {
  visibility: visible;
}
.raz input:placeholder-shown:focus ~ span,
.raz input:not(:placeholder-shown) ~ span {
  bottom: 100%;
  opacity: 1;
  font-size: 80%;
  visibility: visible;
}
</style>

<label class="raz"><input type="email" placeholder="&nbsp;"><span>Email</span></label>

Email

<style>
.raz {
  position: relative;
}
.raz span {
  position: absolute;
  bottom: 50%;
  left: 2px;
  opacity: 0;
  visibility: hidden;
  transition: .3s;
}
.raz input:not(:placeholder-shown) ~ span {
  bottom: 100%;
  opacity: 1;
  visibility: visible;
}
</style>

<label class="raz"><input type="email" placeholder="Email"><span>Email</span></label>

Плавающие метки неоднородны с метками элементов других типов веб-формы. Их менее контрастный цвет хуже различим. [medium.com]

Эффект placeholder для <div>

Атрибут placeholder работает только для <input> и <textarea>, даже если у других тегов указан атрибут contenteditable. [whatwg.org]

<style>
.raz {
  height: 3em;
  border: 1px solid;
}
</style>

<div contentEditable placeholder="Можно ввести текст" class="raz"></div>

<style>
.raz {
  height: 3em;
  border: 1px solid;
}
.raz:empty:not(:focus)::before { 
  content: attr(data-placeholder);
  opacity: .5;
}
</style>

<div contentEditable data-placeholder="Можно ввести текст" class="raz"></div>

Древний метод на память, изменяющий value JavaScript

<input
 onblur="this.value=(this.value=='')?this.title:this.value;"
 onfocus="this.value=(this.value==this.title)?'':this.value;"
 value="Email"
 title="Email"
/>