CSS :placeholder-shown Selector
The CSS :placeholder-shown pseudo-class selects the input element or textarea element that is having placeholder text. The main difference between :placeholder-shown and ::placeholder is that :placeholder-shown is for selecting the input itself when the placeholder text is being shown whereas ::placeholder is about giving style to the placeholder text.
Syntax:
:placeholder-shown { /* CSS Property */ }
Example 1: Below is the example that illustrates the use of :placeholder-shown property.
HTML
<!DOCTYPE html> < html > < head > < style > input { border: 1px solid black; padding: 10px; } input:placeholder-shown { border-color: rgb(255, 114, 58); color: rgb(24, 187, 97); } </ style > </ head > < body > < h1 style = "color: green;" >w3wiki</ h1 > < input placeholder = "Computer Science portal !" > </ body > </ html > |
Output:
Example 2: Below is the example that illustrates the use of :placeholder-shown property.
HTML
<!DOCTYPE html> < html lang = "en" > < head > < style > input.studentid:placeholder-shown { background-color: yellow; color: red; } </ style > </ head > < body > < h1 style = "color: green;" >w3wiki</ h1 > < form > < p > < label for = "branch" >Enter Geek Name:</ label > < input id = "branch" placeholder = "Geek Branch" /> </ p > < p > < label >Enter Geek ID:</ label > < input type = "number" pattern = "[0-9]{7}" class = "studentid" placeholder = "7 digit id" /> </ p > </ form > </ body > </ html > |
Output:
Supported Browsers:
- Google Chrome 47+
- Edge 79+
- Firefox 51+
- Opera 34+
- Safari 9+