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

Псевдокласс `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`,
  которое задает цвет текстовому курсору в инпуте

← →
↑
en ru