The placeholder selector in the CSS pseudo-element is used to design the placeholder text by changing the text color and it allows to modification the style of the text.
The ::first-line pseudo-element is the only subset of CSS properties that is applicable & can be applied in a rule using ::placeholder in its selector. By default, the placeholder text appearance is a translucent or light gray color for most browsers.
Syntax:
::placeholder {
// CSS property
}
We will understand the concept of ::placeholder selector & its implementation through the examples.
Example 1: This example illustrates the ::placeholder selector for changing the text color along with the background color for the placeholder text.
<!DOCTYPE html>
<html>
<head>
<title>::placeholder selector</title>
<style>
input::placeholder {
background-color: #fff;
margin: 10px;
padding: 5px;
color: Green;
}
h1 {
color: green;
}
body {
text-align: center;
}
</style>
</head>
<body>
<h1>Geeksforgeeks</h1>
<h2>::placeholder selector</h2>
<p>Name:
<input placeholder="GeeksforGeeks">
</p>
</body>
</html>
Output:
Example 2: This example illustrates the ::placeholder selector for setting up the placeholder text with its attribute that identifies the hint which describes the expected value of an input field.
<!DOCTYPE html>
<html>
<head>
<title>::placeholder selector</title>
<style>
h1 {
color: green;
}
body {
text-align: center
}
input::placeholder {
background-color: white;
color: green;
text-align: center;
}
</style>
</head>
<body>
<h1>GeeksForGeeks</h1>
<h2>::placeholder Selector </h2>
<input type="text" placeholder="Geeks">
<input type="text" placeholder="Computer Science">
</body>
</html>
Output:
Supported Browser: The browser supported by ::placeholder selector are listed below:
- Google Chrome 57.0
- Microsoft Edge 79.0
- Firefox 51.0
- Safari 10.1
- Opera 44.0