Styling HTML5 Placeholder with CSS

Remember that JavaScript driven placeholder we used to create for the search fields on our sites and blogs? No? How could you, as we have HTML5 placeholder attribute for the input tag to do the same thing without JavaScript.

What’s this input placeholder attribute thing?

It’s a rather simple alternative to put a placeholder text on text input fields in our markup. Before it’s introduction, markup people used to create it through JavaScript or jQuery.

How to use this input placeholder attribute?

<input type="text" placeholder="Some placeholder text..." /> Just like that!

Here is how it looks like:

Style your input placeholder text

Now comes the styling part. Can this placeholder attribute stylable? Yes! You can stylize the HTML5 placeholder text with some CSS3 properties as shown below:

::-webkit-input-placeholder { color: #00f; } ::-moz-placeholder { color: #00f; } input:-moz-placeholder { color:#00f; }

That’s it! You can add more styling to it according to your requirement.

To point a specific class or ID in CSS for the same, proceed like below:

.placeholder-test::-webkit-input-placeholder { color: #00f; } #another-placeholder::-webkit-input-placeholder { color: #00f; } .placeholder-test::-moz-placeholder { color: #00f; } #another-placeholder::-moz-placeholder { color: #00f; } input.placeholder-test:-moz-placeholder { color:#00f; } input#placeholder-test:-moz-placeholder { color:#00f; }

Hope you find this useful :)