Skip to content
Related Articles

Related Articles

CSS ::placeholder Selector

Improve Article
Save Article
Like Article
  • Last Updated : 21 Oct, 2021

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, 4.0 -webkit-
  • Microsoft Edge 12.0 -webkit-, 10.0 -ms-
  • Firefox 51.0, 4.0 -moz-
  • Safari 10.1, 5.0 -webkit-
  • Opera 44.0, 15.0 -webkit-

My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!