How do I get placeholder text in firefox and other browsers that don't support the html5 tag option?

user_91970 0
Viewed 36862

This works in Chrome and any other browser that supports placeholder text in HTML5

<input id="name" name="name"  type="text" placeholder="Please enter your name..." required /> <br />

But, it doesn't work in 3.5 and earlier of Firefox, and obviously IE8, and possibly other browsers.

How do I achieve the same thing (preferably in HTML/CSS - if not I am open to suggestions), to support all the older browsers? If not every single browser, at least Firefox and IE.

Safari and Chrome already support it (or the latest versions anyway).

Thanks.

firefox internet-explorer-8 css html
10 Answers

Here is the simplest solution that I found working everywhere:

<input id="search" 
   name="search" 
   onblur="if (this.value == '') {this.value = 'PLACEHOLDER';}" 
   onfocus="if (this.value == 'PLACEHOLDER') {this.value = '';}"
/>

Replace PLACEHOLDER with your own.

At the moment, FF3 does not yet support the "placeholder" attribute of the "input" element. FF4, Opera11 and Chrome8 support it partially, i.e. they render the placeholder text in the field, but do not delete it when the user focuses in the field, which is worse that not supporting it at all.

user_5854010
user_2465950

Works for me, change your CSS to

::-webkit-input-placeholder {
  color: #999;
}
user_30898130
Related