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

I have a text box that shows some default text. On mou开发者_StackOverflow社区seover, 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!

You should consider using the HTML5 placeholder attribute.

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

There is a significant usability issue with help text that disappears on focus (and that includes the placeholder attribute) in that the user can only see the text when there is no content in the element and it doesn't have focus.

If your help text is more substantial than a simple "Enter name..." or whatever, consider instead providing an onscreen tip in an adjacent element. That way the user can see the help even after they've entered something into the textarea and can check that what they've entered is compatible with the hint.

e.g. if you want a particular format of date, it's handy to still have the required date format displayed after the user enters something into the field, otherwise the only way a user can validate their input is to delete the entry and blur the element—which is not only more work than it needs to be, but not immediately obvious.

In this case, you are providing some very specific advice (it must be in one sentence) and other information—will the user remember that when they've started entering text, or not? How about later when they are checking if they've filled in the form correctly?

The easier you make it for users, the more likely they are to comply with your requirements and not moan about the difficulty of using your site.

e.g.

  <style type="text/css">
  textarea.question {
    width: 50em;
    height: 3em;
    border: 1px solid blue;
  }
  .screenHelp {
    font-family: geneva, arial, sans-serif;
    font-size: 80%;
    color: #bbbbbb;
    background-color: #ffffff;
  }
  .inputTitle {
    font-family: geneva, arial, sans-serif;
    font-size: 90%;
  }
  </style>

<form action="">
  <div>
    <span class="inputTitle">Question or topic you need help with</span>
    <span class="screenHelp"> (in one sentence please)</span><br>
    <textarea name="question" class="question"></textarea>
    <br>
    <input type="reset"><input type="submit">
  </div>
</form>