HTML/CSS Making a textbox with text that is grayed

Question

How do I make a textbox that has a grayed out content, and when I click on it to enter text, the grayed out portion, it disappears and allows me to enter the desired text?

Example:

A "First Name" text box. The words "First Name" are inside the text box grayed out, when I click, those words disappear and I write my name in it.

Answer 1

Chrome, Firefox, IE10 and Safari support the html5 placeholder attribute

<input type="text" placeholder="First Name:" />

In order to get a more cross browser solution you'll need to use some javascript, there are plenty of pre-made solutions out there, though I don't know any off the top of my head.

http://www.w3schools.com/tags/att_input_placeholder.asp

Answer 2

You can use Floern's solution. You may also want to disable the input while you set the color to gray. http://www.w3schools.com/tags/att_input_disabled.asp