CSS ::placeholder Selector
The placeholder selector in the CSS pseudo-element is used to design the placeholder text by changing the text color and it allows to modify 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 of the 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.
HTML
<!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.
HTML
<!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
Please Login to comment...