CSS :placeholder-shown Pseudo-class
Example
Select and style any <input> element that is currently displaying placeholder text:
input:placeholder-shown {
background-color: beige;
border: 2px solid maroon;
border-radius: 5px;
font-style: italic;
}
Try it Yourself »
Definition and Usage
The :placeholder-shown pseudo-class selects
and styles any
<input> or <textarea> element that is currently displaying
placeholder text.
Tip: Also use the ::placeholder pseudo-class to style the placeholder text.
| Version: | CSS4 |
|---|
Browser Support
The numbers in the table specifies the first browser version that fully supports the pseudo-class.
| Pseudo-class | |||||
|---|---|---|---|---|---|
| :placeholder-shown | 47 | 79 | 59 | 9 | 34 |
CSS Syntax
:placeholder-shown {
css declarations;
}
Related Pages
CSS Reference ::placeholder
