- Data Structure
- Networking
- RDBMS
- Operating System
- Java
- MS Excel
- iOS
- HTML
- CSS
- Android
- Python
- C Programming
- C++
- C#
- MongoDB
- MySQL
- Javascript
- PHP
- Physics
- Chemistry
- Biology
- Mathematics
- English
- Economics
- Psychology
- Social Studies
- Fashion Studies
- Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Using CSS :placeholder-shown to Customize Styles for Empty Text Input
To customize the style for the input textbox having a placeholder, we use the :placeholder-shown pseudo-class of CSS. Placeholder text is a hint for the user to understand what is to be typed in the input text field.
The following examples illustrate CSS :placeholder-shown pseudo-class.
Set the border for the text field
The border for the text field is set using the border-color property. Place it inside the placeholder-shown pseudo-class as shown below −
input:placeholder-shown { border-color: dodgerblue; }
Example
Let us see the example −
<!DOCTYPE html> <html> <head> <style> input:placeholder-shown { border-color: dodgerblue; } input:nth-of-type(even):placeholder-shown { border-color: olivedrab; } </style> </head> <body> <input type="text" placeholder="dodgerblue"> <input type="email" placeholder="olivedrab"> </body> </html>
Set the background color for the text field
The background color for the text field is set using the background property. Place it inside the placeholder-shown pseudo-class as shown below −
input:placeholder-shown { border-color: orange; background: powderblue; }
Example
Let us see the example −
<!DOCTYPE html> <html> <head> <style> input:placeholder-shown { border-color: orange; background: powderblue; } </style> </head> <body> <input type="email" placeholder="Enter your email-id"> <input type="text"> </body> </html>
Transform the placeholder text
The text-transform property is used to transform the placeholder text on a web page. It can be transformed to capitalize, uppercase, lowercase, etc. We have changed the placeholder text to uppercase.
Place it inside the placeholder-shown pseudo-class as shown below −
input:placeholder-shown { border-color: blue; text-transform: uppercase; }
Example
Let us see the example −
<!DOCTYPE html> <html> <head> <style> input:placeholder-shown { border-color: blue; text-transform: uppercase; } </style> </head> <body> <h1>Register</h1> <input type="email" placeholder="Enter email-id"> <input type="text" placeholder="Enter password"> </body> </html>
Transform the spacing between placeholder text characters
The letter-spacing property is used to set the space between the placeholder text characters. Place it inside the placeholder-shown pseudo-class as shown below −
input:placeholder-shown { letter-spacing: 4px; }
Example
Let us see the example −
<!DOCTYPE html> <html> <head> <style> input:placeholder-shown { letter-spacing: 4px; } </style> </head> <body> <h1>Register</h1> <input type="email" placeholder="Enter email-id"> <input type="text" placeholder="Enter password"> </body> </html>