Вероятно вы встречали формы с элементов вода, где менялась текстура, что первая исчезала и была к примеру в темном оттенке, а начиная писать, то совершенно другой цвет. Это основном можно увидеть в поисковой строке, так как там больше применяют атрибут placeholder, что только уже старые браузеры не поддерживают.
В этом примере возьмём текстовое поле input и закрепим к нему стили.
Изменение цвета placeholder
HTML
Код
<input type="text" placeholder="Начните вводить текст" value="">
CSS
Код
::-webkit-input-placeholder {color:#f11010; opacity:1;}/* webkit */
::-moz-placeholder {color:#f11010; opacity:1;}/* Firefox 19+ */
:-moz-placeholder {color:#f11010; opacity:1;}/* Firefox 18- */
:-ms-input-placeholder {color:#f11010; opacity:1;}/* IE */
PS - Вдруг не был указан «opacity», то цветовая палитра в браузерах больше всего розовым станет. Но здесь изначально можно указать цветовую гамму для разного поля с разным оттенком.
Демонстрация
CSS
Код
.input-1::-webkit-input-placeholder { color: #ce0d0d; }
.input-2::-webkit-input-placeholder { color: #0a8c0a; }
Убираем placeholder при нажатии на поле
Все браузеры по умолчанию должны скрывать placeholder, что можно увидеть, только когда начнешь печатать текст Но можно сделать сделать так, чтоб он исчезал сразу, как только навели курсор и сделали клик, что надпись исчезает. Здесь нужно прописать стиль, что подсказку сделает полностью прозрачной.
CSS
Код
: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 */
Скрытие placeholder при наведение можно сделать по разному, как пример, это плавно изменяя прозрачность или палитру цвета.
Демонстрация
