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:

.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 acplish 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!

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 acplish 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!

• javascript
• css

• 1 Two words: placeholder attribute. It would be better to behave as placeholder does - don't use onmouseover, instead use when the textarea is focused. But, you should just be using placeholder and a plugin for older browsers. – thirtydot Commented Oct 4, 2011 at 4:16
• 2 HTML5 placeholders are made just for that! – tomsseisums Commented Oct 4, 2011 at 4:17
• Don't use placeholders (native, scripted, whatever), they are a pain for users. Provide onscreen help instead. – RobG Commented Oct 4, 2011 at 4:32
• @Donny image link is not working – Jubin Patel Commented Jul 17, 2013 at 4:59

2 Answers 2

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 patible 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 ply 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>