HTML5 Input Placeholders – IE6+

Place holders are awesome but were only introduced with HTML5 meaning older browsers don’t support them by default. This is a great table showing browser support for placeholders. The biggest problem is that we need to consider is IE9 and older, fortunately with JQuery we can workaround this problem. This post describes the solution that I use.


My solution uses Mathias’ solution on github. See online demo.

Add reference to JQuery (Requires jQuery 1.6+) 

<script type="text/javascript" src="//"></script>

Download and add reference to jquery.placeholder.js

<script src="/js/jquery.placeholder.js"></script>

add the following to your form page:

$(function() {
	$('input, textarea').placeholder();
input, textarea { color: #000; }
.placeholder { color: #aaa; }
<input type="text" name="name" placeholder="e.g. John Doe">
<input type="email" name="email" placeholder="e.g. address@example.ext">


  • requires jquery 1.6+. for an older version of this plugin that works under jquery 1.4.2+, see v1.8.7.
  • works in all a-grade browsers, including ie6.
  • automatically checks if the browser natively supports the html5

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: