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-
leave a comment
0 Comments