CODEWITHSUNDEEP
htmlcss
user784637
user784637

Reputation: 16142

How to style input element so that inner text disappears when you click on the input element?

Sorry I know this question has probably been asked before, but do you know of any clean ways to style input elements so that the inner text disappears when you click on the input element?

Upvotes: 0

Views: 872

Answers (2)

James Allardice
James Allardice

Reputation: 165971

What you appear to be looking for is the HTML5 placeholder attribute:

<input type="text" placeholder="Placeholder text">

However, this is not supported in older browsers, so you will have to use a JavaScript shim to add the functionality. Here's an example of such a shim which does not depend on any external resources such as jQuery.

The shim linked to above allows you to simply use the placeholder attribute as shown above. Simply call Placeholders.init() on DOM ready and it will work. If the attribute is supported natively, it won't take effect.

Upvotes: 2

Sagar Patil
Sagar Patil

Reputation: 1948

You're talking about using the placeholder attribute. As of HTML5, this is a default attribute of an input text element.

For older browsers that don't support this, you could use the JQuery Watermark plugin - http://code.google.com/p/jquery-watermark/

Upvotes: 1

Related Questions