Skip to content
Related Articles

Related Articles

CSS | ::placeholder Selector
  • Last Updated : 06 Aug, 2019

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:




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




<!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-
  • 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
Recommended Articles
Page :