Псевдоэлемент placeholder задает стили для подсказки placeholder в тегах input или textarea.

Подсказка placeholder нужна для того, чтобы указать пользователю, что именно следует вводить в данное поле формы. Подробнее см. по ссылке placeholder.

Если цвет подсказки placeholder не задан через псевдоэлемент placeholder, то он будет такой же, какой задан для всего элемента через свойство color, но более бледный, так как по умолчанию браузер добавляет полупрозрачность подсказке placeholder. Отменить ее можно можно через свойство opacity для псевдоэлемента placeholder (не для элемента!).

Синтаксис

input::placeholder {
	color: red;
}

Примеры

Пример

В данном примере подсказка покрашена в красный цвет. Обратите внимание на то, что для кроссбраузерности добавлено гораздо больше кода, чем вы могли бы ожидать. Кроме того, обратите внимание на то, что цвет получился бледным (так как он по умолчанию полупрозрачный):

<input type="text" placeholder="Я подсказка:)">
input:-moz-placeholder {
	color: red;
}
input::-moz-placeholder {
	color: red;
}
input::-webkit-input-placeholder {
	color: red;
}
input:-ms-placeholder {
	color: red;
}
input::placeholder {
	color: red;
}

Результат выполнения кода:

Пример . Отмена полупрозрачности подсказки

Отменим полупрозрачность подсказки с помощью CSS свойства opacity. Теперь ее цвет станет действительно красным:

<input type="text" placeholder="Я подсказка:)">
input:-moz-placeholder {
	color: red;
	opacity: 1;
}
input::-moz-placeholder {
	color: red;
	opacity: 1;
}
input::-webkit-input-placeholder {
	color: red;
	opacity: 1;
}
input:-ms-placeholder {
	color: red;
	opacity: 1;
}
input::placeholder {
	color: red;
	opacity: 1;
}

Результат выполнения кода:

Пример . Подсказка в textarea

Покрасим подсказку в красный цвет в теге textarea:

<textarea placeholder="Я подсказка:)"></textarea>
textarea:-moz-placeholder {
	color: red;
}
textarea::-moz-placeholder {
	color: red;
}
textarea::-webkit-input-placeholder {
	color: red;
}
textarea:-ms-placeholder {
	color: red;
}
textarea::placeholder {
	color: red;
}

Результат выполнения кода: