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

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

Синтаксис

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

Пример

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

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

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

Результат:

Смотрите также