Simple way to make input text transparent

Question

I know I can make a input form with default text by specifying the value attribute, but how do I make it so the text is transparent visually and also disappears when it is clicked? I want to make my text fields the way twitter does it.

All the resources I find seem overly complex and I would expect this to be as simple as setting a few attributes, but I just don't know which ones to set. I tried looking at twitters source code in chrome dev tools but I couldn't locate the code which enabled them to use transparent text that disappears when clicked.

Answer 1

You can use placeholder attribute for HTML5 supported browsers. E.g.:

<input type="text" placeholder="First name">

For old browsers, it is not a trivial thing to implement. Please see these questions:

• how to use HTML5 placeholder attribute with backward-compatibility in mind?
• True placeholder text fix for old browsers?
• What is the most accurate way to emulate the "placeholder" attribute in browsers that don't support it natively?

Answer 2

Try the placeholder attribute:

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