Skip to content
Related Articles

Related Articles

CSS ::placeholder Selector

View Discussion
Improve Article
Save Article
  • Last Updated : 23 Aug, 2022
View Discussion
Improve Article
Save Article

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

My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!