Steve Bennett Steve Bennett - 3 months ago 18
CSS Question

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

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

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/