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

Question

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

Answer 1

For "placeholder" work in Firefox just add the attribute

::-moz-placeholder

in CSS tags.

Answer 2

One day I'll get around to properly documenting this, but see this example: http://dorward.me.uk/tmp/label-work/example.html

In short — position a <label> under a transparent <input> using <div> to provide background colour and borders.

Then use JS to determine if the label should be visible or not based on focusing.

Apply different styles when JS is not available to position the label beside the element instead.

Unlike using the value, this doesn't render the content inaccessible to devices which only display the focused content (e.g. screen readers), and also works for inputs of the password type.

Answer 3

By the way...if anyone is interested...I found a nice elegant solution that is a jQuery plugin that is SOOO nice.

It literally is one line of jQuery, a minified js plugin, along with a simple class name on the input.

http://labs.thesedays.com/projects/jquery/clearfield/

It's the most beautiful thing I have discovered, next to 'Placeholder' in html.

Answer 4

I use this one: https://github.com/Jayphen/placeholder This lightweight and simple jQuery plugin is a fork of danbentley/placeholder.

Advantage: it adds a class "placeholder" to input fields that are temporarily filled. Css ".placeholder {color:silver}" make the polyfill text look like a placeholder instead of regular input text.

Disadvantage: It doesn't polyfill the placeholder of a password field.