Styling Placeholder Text with CSS

by kirupa   |   16 March 2012

  Have questions? Discuss this HTML tutorial with others on the forums.

One of the things added in HTML5 is the ability to specify placeholder text inside your input and textarea elements. If you haven't encountered them before, placeholder text is basically a temporary label that describes what an input or textarea stands for:

placeholder text

Once you give an input field or textarea focus and start typing, the contents of your placeholder text disappear:

no more placeholder text

This tutorial really isn't about how to use placeholder text. For that, you should check out the placeholder text section on the Creating an Awesome Search Box tutorial. Instead, in this tutorial, you will learn how to style the placeholder text.

Let's go!

Styling the Placeholder Text

On the surface, this seems pretty simple. You have some text inside either an input or textarea element that needs some CSS attention. The challenge is that you do not have individual text elements that you can style directly. Instead, your placeholder text is very much an internal component of your input and textarea element.

The way you set the style of your placeholder text is by using the *-placeholder and *-input-placeholder pseudo selectors:

:-webkit-input-placeholder {
font-size: 12px;
font-style: italic;
color: #CCC;
:-moz-placeholder {
font-size: 12px;
font-style: italic;
color: #CCC;
:-ms-input-placeholder {
font-size: 12px;
font-style: italic;
color: #CCC;

The pseudo selectors are a bit different for each browser. For Safari and Chrome, you will use ::-webkit-input-placeholder, :-moz-placeholder for Firefox, and :-ms-input-placeholder for Internet Explorer 10. Opera doesn't support styling placeholder content...yet!

An example of this style applied to an input element with placeholder text looks as follows:


[ the placeholder text is grayed out! ]

You can actually see this style being used in the header of this site!

Getting Help

If you have questions, need some assistance on this topic, or just want to chat - post in the comments below or drop by our friendly forums (where you have a lot more formatting options) and post your question. There are a lot of knowledgeable and witty people who would be happy to help you out


Did you enjoy reading this and found it useful? If so, please share it with your friends:

If you didn't like it, I always like to hear how I can do better next time. Please feel free to contact me directly via e-mail, facebook, or twitter.

Kirupa Chinnathambi
I like to talk a lot - A WHOLE LOT. When I'm not talking, I've been known to write the occasional English word. You can learn more about me by going here.

Add Your Comment (or post on the Forums)

blog comments powered by Disqus

Awesome and high-performance web hosting!
new books - yay!!!