HTML5 input Placeholder text – HTML Forms

First up is the placeholder HTML5 attribute, which allows us to set placeholder text as we would currently do with the value attribute in HTML4 . It should only be used for short descriptions.


Figure 1. Browser search box in Safari without and with focus
Figure 1. Browser search box in Safari without and with focus

Let’s have a look at how to implement the placeholder attribute.

<input id="user-name" name="user-name" type="text" placeholder="at least 3 characters" />


Figure 2. Placeholder attribute support in Chrome, unfocused and focused
Figure 2. Placeholder attribute support in Chrome, unfocused and focused


More Example:

Two input fields and submit submit button with a placeholder text:

<form action="demo_form.php">
 <input type="text" name="fname" placeholder="First name"><br>
 <input type="text" name="lname" placeholder="Last name"><br>

This will produce following result:

Placeholder HTML Code Result
Placeholder HTML Code Results


Change an input’s HTML5 placeholder color with CSS:

HTML5 Placeholder Implementation:


: :-moz-placeholder (one colon).
  • Mozilla Firefox 19+ is using a pseudo-element:

but the old selector will still work for a while.

  •  Internet Explorer 10 and 11 are using a pseudo-class
: :-ms-input-placeholder.



CSS selectors:


 color: #909;
 color: #909;
 opacity: 1;
 color: #909;
 opacity: 1;
 color: #909;
<input placeholder="Stack Snippets are awesome!">

This short and clean code:

::-webkit-input-placeholder{color: #ddd;}
:-moz-placeholder{color:#ddd;/* For Firefox 18- */}
::-moz-placeholder{color:#ddd;/* For Firefox 19+ */}

Here is one more example:

.form-control::-webkit-input-placeholder {
color: red;
width: 250px;
h1 {
color: red;
<div class="col-sm-4">
 <input class="form-control" placeholder="Enter text here.." ng-model="Email" required/>
