Open In App

CSS ::placeholder Selector

Improve
Improve
Like Article
Like
Save
Share
Report

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 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


Last Updated : 05 Jul, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads