Can you you show a grey hint in an HTML text box with CSS alone?

Question

You see these text input boxes from time to time on the web: a grey label is shown inside the box, but once you type there, the grey text disappears. This page even has one: the "Title" field behaves exactly like that.

So, questions:

1. Is there a standard term for this? I'm really struggling to find anything on google

2. Can it be done with just CSS?

3. Failing that, can it be done with localised JavaScript? (ie, code just within the tag, not in the HTML header).

Answer 1

The "placeholder" attribute is now supported across all major browsers.

<form>
<input type="text" placeholder="placeholder text">
</form>​

Styling it still seems to require vendor prefixes:

input::-webkit-input-placeholder {
    color: #59e;
}    
input:-moz-placeholder {  
    color: #59e;  
}
​

Seen here: http://jsfiddle.net/webvitaly/bGrQ4/2/

Answer 2

I don't know of a way to do it with CSS. But looking at the page source, SO is doing it thusly-wise:

<input name="q" class="textbox" tabindex="1" 
       onfocus="if (this.value=='search') this.value = ''" 
       type="text" maxlength="80" size="28" value="search">

The middle line starting with "onfocus" is where the work is happening. When the text field gets focus, it checks to see if the default value ("search") is there. If so, it sets the value to '' (empty string). Otherwise, the text is unaffected.

One potential issue here is that if someone is trying to search for the word "search", then clicks outside of the box and clicks back in again, the text gets reset. Not a huge issue, but something to keep in mind as you're working.