The placeholder-shown pseudo-class

The placeholder-shown pseudo-class specifies the style of the input or textarea that displays the so-called hint text that disappears after you start typing.

Syntax

cssselector:placeholder-shown {}

Example

Let's set a red border for the input, which displays a hint text, and after entering it, let the border be repainted green:

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

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

Результат:

See also