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

dkr · Oct 4, 2011

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:
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:

HTML:

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

brackwho · Oct 4, 2011

Quick, and maybe not compatible with old browsers...

#question {background:url(your image url) no-repeat top left;color:black}
#question:hover {background:white}
#question:focus {background:white}

Just create a image of your "instructional text" and use it as a background.

yeppers · Oct 5, 2011

Hi dkr,

I have done this before using italics and grey text to represent instructional text, and then js to change the css properties. Seems to work quite well.

I've coded a html page so you can see for yourself. Take what you need if this is where you wanted, adjust the font and colors etc to suit your current site.

Please note that you did not have opening and closing brackets for your javascript if conditions, this is fine for single operations however now that there are multiple operations i've added them in, otherwise the script won't work the way you want. Also, note i have used the general 'font' property to adjust the italics instead of 'font-style' as javascript will error on using a dash in there.

Code:

<html>
<head>
<title>Testing textbox css change</title>
<style type="text/css">
#question
{
color:grey;
font: italic 12pt Arial;
}
</style>
</head>
<body>
<textarea class="textarea" onblur="if(this.value=='') { this.value='Question or topic you need help with (in one sentence)...'; this.style.color='grey'; this.style.font='italic 12pt Arial'; }" onfocus="if(this.value=='Question or topic you need help with (in one sentence)...') { this.value=''; this.style.color='#111111'; this.style.font='normal 12pt Arial'; }" id="question" name="question">Question or topic you need help with (in one sentence)...</textarea>
</body>
</html>

You can see a demo here: http://thisisaserver.com/thisisafolder/js-instructional-text.html

You can easily edit it if you'd rather the text disappear on mouseover, however i prefer to make people click before the text disappears to ensure they have read it.

Hope this helps, let me know,
Rhett.

dkr · Oct 6, 2011

This worked brilliantly, thanks a million!

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

More options

dkr

Respect My Authority!VIP Member

brackwho

Established Member

yeppers

VIP Member

dkr

Respect My Authority!VIP Member

Similar threads

We're social

New posts ➔

Auction activity ➔

How do you think a potential buyer first checks if your domain is for sale?

Polls of interest ➔

Hot this week ➔

Community favorite ➔

Hot this month ➔

Blog favorites

Taiwanchat.com

SocialPricing.com

electronicjail.com

Arphil.com

MovingTheWorld.com

trackingemployee.com

lmia.net

GarciaLocksmith.com

BitcoinTrainers.com

ethgeek.com

Pinned

Appreciation

Agreement

Answers

Relevance

Reaction

Status

Feeling