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; }

Recent Posts

1. Automating Code Linting with GitHub Actions for WordPress Plugins
2. Comprehensive Guide to Linting PHP, JavaScript, and CSS in WordPress Plugins Using Composer
3. The Ultimate Guide to Indexing in Database Design
4. Understanding 'update_meta_cache' in WordPress - When to Use It, When Not to, and Its Impact on Database Queries
5. A Guide to Configuring JavaScript and SCSS Paths in WordPress Plugins with @wordpress/scripts

This article was published on February 24, 2015

Your Questions / Comments

If you found this article interesting, found errors, or just want to discuss about it, please get in touch.