

- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- 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.
Example
The following examples illustrate CSS :placeholder-shown pseudo-class.
<!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>
Output
This will produce the following result −
Example
<!DOCTYPE html> <html> <head> <style> input:placeholder-shown { border-color: orange; background: powderblue; } </style> </head> <body> <input type="radio" checked> <input type="email" placeholder="orange"> <input type="text"> </body> </html>
Output
This will produce the following result −
- Related Questions & Answers
- HTML DOM Input Text placeholder property
- Add different styles to hyperlinks using CSS
- How to Change Placeholder Color for Textboxes in CSS
- How to change an HTML5 input's placeholder color with CSS?
- HTML <input> placeholder Attribute
- HTML DOM Input Number placeholder Property
- HTML DOM Input Email placeholder Property
- HTML DOM Input URL placeholder Property
- HTML DOM Input Search placeholder property
- HTML DOM Input Password placeholder property
- Autocomplete text input for HTML5?
- Standard Link Styles in CSS
- Handling Empty Cells using CSS
- MySQL query to display custom text for empty columns
- Customize links using disabled class for unclickable links
Advertisements