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;" >GeeksforGeeks</ 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;" >GeeksforGeeks</ 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+
Last Updated :
30 Aug, 2022
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...