Style Placeholder Text

The placeholder attribute was introduced with HTML5 to offer the user the ability to show text in an input field, when the user clicks on the input field and starts typing the text disappears so that you can enter what you need. Here we will show you how you can style the text displayed by the placeholder attribute.

To style the text in the input field, we use the following CSS pseudo code:

input:-ms-input-placeholder {
   color:#ccc;
}

input::-webkit-input-placeholder {
   color:#ccc;
}

input:-moz-placeholder {
   color:#ccc;
}

/* firefox 19+ */
input::-moz-placeholder {
   color:#ccc;
}
Give it a Try!

The above code will make the placeholder text display with a color of #ccc, which is grey in color.
Currently you will require all of the above CSS pseudo elements for the placeholder to work in all web browsers.
With the above code, we only changed the color of the text, you can also change a few other aspects of the text, such as: color, font-style, font-weight and text-transform just to name a few. Check out the code below with a few extra features added.

input:-ms-input-placeholder {
   color:#66FF99;
   font-style:italic;
   text-transform:uppercase;
   text-align:center;
}

input::-webkit-input-placeholder {
   color:#66FF99;
   font-style:italic;
   text-transform:uppercase;
   text-align:center;
}

input:-moz-placeholder {
   color:#66FF99;
   font-style:italic;
   text-transform:uppercase;
   text-align:center;
}

/* firefox 19+ */
input::-moz-placeholder {
   color:#66FF99;
   font-style:italic;
   text-transform:uppercase;
   text-align:center;
}
Give it a Try!

As can be seen, with the above code we have also styled the text-align, text-transform and font-color.

Unfortunately the placeholder attribute will not work with older browsers, if you need this function with older browsers you will need to use jquery to accomplish this task.

There are a range of other CSS properties that you can use to style the placeholder attribute, but we will leave them for another day.

One Response to Style Placeholder Text

Leave a Reply

Your email address will not be published. Required fields are marked *