CSS | ::placeholder Selector

The placeholder selector in CSS is used to design the placeholder text by changing the text color and it allows to modify the style of the text.

Syntax:

::placeholder {
    // CSS property
}

Example 1:

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


Output:

Example 2:

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


Output:

Supported Browser: The browser supported by ::placeholder selector are listed below:

  • Google Chrome 57.0, 4.0 -webkit-
  • Internet Explorer 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

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.