Styling Placeholder Text With CSS

To change the placeholder styles, you can use the following code :


::-webkit-input-placeholder { /** In Webkit browsers**/
color: #5C5C5C;
}
::-moz-placeholder { /** In Mozilla*/
color: #5C5C5C;
}

This code will change the color of all the placeholders present in the page.  You have to use both sets of the code give above if you want the style to be consistent in all browsers.  The first code is for webkit browsers such as Google Chrome and Apple Safari. The second code is exclusively for Mozilla Firefox.

If you want to style a specific placeholder, use the code below :

.customclass::-webkit-input-placeholder {
color: #b5b5b5;
}
.customclass::-moz-placeholder {
color: #b5b5b5;
}

Using this code, placeholders of fields with class name ‘customclass’ will change color to #b5b5b5.

Advertisements

One thought on “Styling Placeholder Text With CSS

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s