CSS | ::placeholder Selector - Tutorialspoint.dev

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-

CSS | ::placeholder Selector

tags:

leave a comment

0 Comments

Subscribe to Our Newsletter

Top Followed books