Псевдокласс placeholder-shown

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

Синтаксис

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

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

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

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