
Learn how to use the placeholder attribute to create beautiful inputs.
Demo
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:
1 2 3 4 5 |
<form> <input type="text" placeholder="Lastname" name="lname"> <input type="password" placeholder="New Password" name="pass"> <input type="submit" value="Submit"> </form> |
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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
/* WebKit browsers */ ::-webkit-input-placeholder { color: #777; } /* Mozilla Firefox 4 to 18 */ :-moz-placeholder { color: #777; opacity: 1; } /* Mozilla Firefox 19+ */ ::-moz-placeholder { color: #777; opacity: 1; } /* Internet Explorer 10+ */ :-ms-input-placeholder { color: #777; } |
Browser Support
The placeholder attribute is supported in Chrome, Safari ,Firefox, Opera, and Internet Explorer 10+.
Conclusion
Now you can start using HTML5 placeholder attribute in your projects.
I hope find this tutorial useful.

FEEDBACK0