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

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.

Answer 2

1. I call them input labels.. don't know if it is a standard

2. Nope - you could if they were allowed child elements like so

   input { position: relative; }

   input label { position: absolute; top: 0; left: 0; }

   input:focus label { display: none; }

   But you can't have children of inputs (AFAIK), so it won't work.

3. Yes, see the link above (using jQuery, but trivially done without)

Answer 3

If you want this with HTML + CSS only, you can try using the new HTML5 placeholder input attribute. Unfortunately this attribute is not widely supported, so try using a script such as Modernizr to detect browser support for this feature for a feature such as this.

I would not recommend using inline Javascript for this - it's bad practice and goes against the principle of separation of content and behavior. Using jQuery, for instance, something like this will work:

var input = $('input[name="search"]');
var placeHolder = input.attr('placeholder');

input.val(placeHolder);

input.focus(function(){
    this.value = '';
}).blur(function(){
    if(this.value === '') this.value = placeHolder;
});