Tutorialspoint.dev

CSS | ::placeholder Selector

The placeholder selector in CSS is use to design the 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-


This article is attributed to GeeksforGeeks.org

leave a comment

code

0 Comments

load comments

Subscribe to Our Newsletter