# 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

`selector: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:

`<form> <input placeholder="enter the text"> </form>` `input { border: 1px solid green; } input:placeholder-shown { border-color: red; }`

:

## See also

- the `:default` pseudo-class
  that sets a default style for elements
- the `:indeterminate` pseudo-class
  that styles switches that are in an indeterminate state
- the `:optional` pseudo-class
  that sets a style for the input that does not have a required attribute
- the `:read-only` pseudo-class
  that sets a style for inputs that cannot be changed
- the `:required` pseudo-class
  that sets a style of the input that has the required attribute set
- the `:focus-within` pseudo-class
  that styles the elements in focus
- the `caret-color` property
  that sets a color of the text cursor in input

← →
↑
en ru