Псевдокласс placeholder-shown - стиль элементов при отображении текста-подсказки в CSS

Псевдокласс placeholder-shown задает стиль инпуту или текстареа, у которых отображается т.н. текст-подсказка, исчезающий после начала ввода текста.

Синтаксис

селектор:placeholder-shown {}

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

<form>
	<input placeholder="enter the text">
</form>

input {
	border: 1px solid green;
}
input:placeholder-shown {
	border-color: red;
}

псевдокласс :default,
который задает стиль элементам по умолчанию
псевдокласс :indeterminate,
который задает стиль переключателям, которые находятся в неопределенном состоянии
псевдокласс :optional,
который задает стиль инпуту, у которого нет атрибута required
псевдокласс :read-only,
который задает стиль инпутам, недоступным для изменения
псевдокласс :required,
который задает стиль инпуту, у которого задан атрибут required
псевдокласс :focus-within,
который задает стиль элементам в фокусе
свойство caret-color,
которое задает цвет текстовому курсору в инпуте