HTML/CSS input/textarea, default text, and colors

Question

Two semi-related questions:

1) I've seen <input> and <textarea> boxes that contain some default text, like "enter search terms here", and the moment you click on the box, the text disappears. How is this implemented? Is this a Javascript thing?

2) Can the default text be in one color, and whatever you type (either overwriting, or appending), be in a different color?

Answer 1

Not sure why the above is marked as answered because it doesn't actually answer the question. Hopefully this does:

HTML4

<label for="name">Name</label>    
<input type="text" name="name" value="Enter your full name"  onfocus="if(this.value=='Enter your full name') {this.value='', this.style.color='#999'};" onblur="if(this.value=='') {this.value='Enter your full name', this.style.color='#555';}" />

Lets break it down:

value="Enter your full name"

This adds a default string of text in your input.

<textarea>Enter your comment</textarea>

The same can be achieved with a textarea by entering your text between the tags.

onfocus="if(this.value=='Enter your full name') {this.value='', this.style.color='#999'};"

If the input receives focus (ie. is clicked or tabbed on to) we check if the current input text is equal to our default text string "Enter your full name". If it is we set it to be an empty string and change the font colour.

onblur="if(this.value=='') {this.value='Enter your full name', this.style.color='#555';}

When the input looses focus we check if the current input text is blank. If it is we change back to our default text string and change the colour back to it's original state.

HTML5

<input type="text" name="name" placeholder="Enter your full name">
<textarea placeholder="Enter your comment"></textarea>

HTML5 has a built-in 'placeholder' attribute for doing this which can be styled in the following way:

::-webkit-input-placeholder  { color:#555; } /* Webkit */
:-moz-placeholder { color:#555; }  /* Firefox <= 18 */
::-moz-placeholder { color:#555; }  /* Firefox >= 19 */
:-ms-input-placeholder {  color: #555; } /* Internet Explorer */

EXAMPLE

Answer 2

1. They're called input watermark. You can find a lot of jquery plugins for doing that. This is one of them

2. You can control watermark text using css