Style placeholder text of input fields - CSS3
In default, the placeholder texts have a light gray color fonts and an ugly look according to browser default styles. But we can uniformly style these placeholder text in all modern browsers using CSS3.
To style placeholder texts, we want to use vendor prefix CSS properties.
/* all */
::-webkit-input-placeholder {
color: red;
}
:-moz-placeholder { /* Firefox 18- */
color: red;
}
::-moz-placeholder { /* Firefox 19+ */
color: red;
}
:-ms-input-placeholder {
color: red;
}
If you like to apply different style on each input field placeholder, just target specific input field and then apply styles on it.
/* individual: webkit */
#field1::-webkit-input-placeholder { color:#00f; }
#field3::-webkit-input-placeholder { color:#090; background:lightgreen; text-transform:uppercase; }
#field1::-moz-placeholder { color:#00f; }
#field2::-moz-placeholder { color:#090; background:lightgreen; text-transform:uppercase; }
Looking for a skilled WordPress/WooCommerce developer? I'm currently available for freelance, contract, or full-time remote opportunities! Let's create something amazing together. Send me a quick message, and I'll respond within 24 hours!
Recent Posts
- Understanding the Singleton Pattern and Using Traits to Achieve Singleton in WordPress Plugin Development
- REST API Methods Explained with Best Practices for Building Clean and Secure APIs
- My 28-Day Plan to Master Modern WordPress Development Using AI Tools
- Scaling WordPress - How Custom Database Tables Solve the Post Meta Bottleneck
- WordPress Transients Explained - A Developer's Guide to Site Performance
Your Questions / Comments
If you found this article interesting, found errors, or just want to discuss about it, please get in touch.