CSS :placeholder-shown pseudo-class

Definition and usage

CSS :placeholder-shown The pseudo-class is used to select and set the style of any <input> or <textarea> element styles.

Tip:You can also use ::placeholder Use pseudo-elements to set the style of the placeholder text.

Example

Choose and set the style of any <input> element that displays the current placeholder text:

input:placeholder-shown {
  background-color: beige;
  border: 2px solid maroon;
  border-radius: 5px;
  font-style: italic;
}

Try it yourself

CSS syntax

:placeholder-shown {
  css declarations;
}

Technical details

Version: CSS4

Browser support

The numbers in the table specify the first browser version that fully supports the pseudo-class.

Chrome Edge Firefox Safari Opera
47 79 59 9 34

Related pages

Reference:CSS ::placeholder pseudo-element