Using HTML5 Placeholder Attribute

Learn how to use the placeholder attribute to create beautiful inputs.

Today we will go over the use of HTML5’s placeholder attribute.
The placeholder attribute specifies a short hint (a word or short phrase) intended to help the user with data entry.
The syntax looks like this <input placeholder=”placeholder-text”>.

The Markup

Two input fields with a placeholder text:

Styling the Placeholder

Styling the placeholder attribute across all browsers.

– Webkit: ::-webkit-input-placeholder pseudo-element; – IE10: :-ms-input-placeholder pseudo-class; – Gecko18-: :-moz-placeholder pseudo-class; – Gecko19+: ::-moz-placeholder pseudo-element; – Presto: nothing.

Browser Support

The placeholder attribute is supported in Chrome, Safari ,Firefox, Opera, and Internet Explorer 10+.


Now you can start using HTML5 placeholder attribute in your projects.

I hope find this tutorial useful.



Tagged with:

View all contributions by


Related Articles


Stay connected with us

Add us on Google+

Follow us on Facebook

Follow us on Twitter

Get updates via RSS

Get email updates


Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">