CSS :: Псевдоэлемент ::placeholder

Псевдоэлемент ::placeholder (от англ. placeholder – метка-заполнитель) позволяет задать стилевое оформление подсказки, созданной атрибутом placeholder. Например, p::placeholder {блок объявлений}. Псевдокласс может быть полезен для изменения шрифта и цвета подсказки в поле ввода.

Браузер Microsoft Edge использует псевдоэлемент ::-ms-input-placeholder, а браузер Internet Explorer использует псевдокласс :-ms-input-placeholder.

Селекторы псевдоэлементов выбирают элементы требуемого типа, явно не указанные в дереве элементов html-документа и соответствующие требованиям указанного в селекторе псевдоэлемента, который отделяется от элемента двумя двоеточиями «::».

Синтаксис

<селектор>::placeholder {блок объявлений}

Ссылки

Официальный сайт W3C: https://drafts.csswg.org/css-pseudo-4/#placeholder-pseudo

Статья на Mozilla Firefox: https://developer.mozilla.org/ru/docs/Web/CSS/::placeholder

Примеры

HTML Результат

htmlCodes

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">  
	<title>Пример №1</title>

	<style>
		
		/* Подсказку для имени оформим зеленым цветом */
		input[placeholder="Иван"]::placeholder{
		color: green;
		}

		/* Это для Internet Explorer */
		input[placeholder="Иван"]:-ms-input-placeholder{
		color: green;
		}

		/* Это для Microsoft Edge */
		input[placeholder="Иван"]::-ms-input-placeholder{
		color: green;
		}
					
		/* Подсказку для описания оформим оранжевым цветом */
		textarea[placeholder="Кратко о себе"]::placeholder{
		color: orange;
		}
					
		/* Это для Internet Explorer */
		textarea[placeholder="Кратко о себе"]:-ms-input-placeholder{
		color: orange;
		}		
					
		/* Это для Microsoft Edge */
		textarea[placeholder="Кратко о себе"]::-ms-input-placeholder{
		color: orange;
		}
		
	</style>
	
</head>
<body>

	<form action="http://localhost/test/php/script_1.php" method="POST">
		
		<label for="first_name">Имя: </label> &nbsp; 
		<input type="text" name="first_name" placeholder="Иван"><br><br> 
				 
		<textarea name="message" placeholder="Кратко о себе"></textarea><br><br>
		
		<button type="reset">Сброс</button> &nbsp; 
		<button type="submit" disabled>Отправить</button>
		
	</form>
	
</body>
</html>

Пример №1