HTML/CSS Making a textbox with text that is grayed out, and disappears when I click to enter info, how?

html css textbox
Ibn Ali al-Turki picture Ibn Ali al-Turki · Jan 13, 2011 · Viewed 193.6k times · Source

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

Psytronic picture Psytronic · Jan 13, 2011

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

Related questions

Add padding to HTML text input field

I want to add some space to the right of an <input type="text" /> so that there's some empty space on the right of the field. So, instead of , I'd get . So, same behavior just some empty space …

Read More
Aligning text and select boxes to the same width in CSS?

Ok this is seemingly impossible to get right. I have a text box and a select box. I want them to be the same width exactly so they line up on the left margin and the right margin. <!DOCTYPE …

Read More
remove text box drop down suggestions

I have a text input where people type and send text. I don't want the text box to have a drop down box with suggestions based on previous inputs. How do i remove this textbox drop down box? (I know …

Read More