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