How do I grey out the default text of a text box?

Hey there,

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:

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>


Hm, you might need JS for this. You can set styles for text in the text box, but I’m not sure you can specify a different appearance for the default text and normal text with CSS alone. You might need JS to insert a new style.