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+