In Tutorial by Barrett Palmer June 5, 2014

Using HTML5 Placeholder Attribute

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:

<form>
<input type="text" placeholder="Lastname" name="lname">
<input type="password" placeholder="New Password" name="pass">
<input type="submit" value="Submit">
</form>

<form>

</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.

/* 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;
}