Question

I have a text box that shows some default text. On mouseover, the text would disappear and the user would be able to type in there regularly:

http://snpr.cm/bnGelO.jpg

However, I’d like to apply some CSS styling to the default text so that it looks like instructional text and nothing else. Do you have any ideas on how to accomplish this?

1. Default text would be grey colored

2. Onmouseover the text would disappear, and when the user starts typing it would be just regular black.

Here’s the current code for this:

<textarea
    class="textarea" 
    onblur="if(this.value=='') this.value='Question or topic you need help with (in one sentence)...';" 
    onfocus="if(this.value=='Question or topic you need help with (in one sentence)...') this.value='';" 
    id="question"
    name="question"
>
    Question or topic you need help with (in one sentence)...
</textarea>

Thanks!

Answer 1

You should consider using the HTML5 placeholder attribute.

This colors the text a light grey and is removed on focus.