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

dkr · 10-03-2011, 09:02 PM

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

<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!
????: NamePros.com http://www.namepros.com/programming/732951-how-do-i-grey-out-default.html
Donny

brackwho · 10-04-2011, 05:03 AM

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.

BillyConnite · 10-05-2011, 05:10 AM

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/thisisafold...onal-text.html
????: NamePros.com http://www.namepros.com/showthread.php?t=732951

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 · 10-06-2011, 03:19 PM

This worked brilliantly, thanks a million!

10-03-2011, 09:02 PM	THREAD STARTER #1 (permalink)
dkr Respect My Authority! Join Date: Jul 2005 Location: Canada Posts: 2,234 Follow @donnyouyang	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: 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 Code: <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! ????: NamePros.com http://www.namepros.com/programming/732951-how-do-i-grey-out-default.html Donny __________________ Follow Me (new!): @donnyouyang Founder @ Rayku \| Kinkarso Tech

10-04-2011, 05:03 AM	#2 (permalink)
brackwho NamePros Member Join Date: Feb 2011 Posts: 43	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. __________________ my blog

10-05-2011, 05:10 AM	#3 (permalink)
BillyConnite Join Date: Jul 2005 Location: Coffs H, Australia Posts: 3,456	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/thisisafold...onal-text.html ????: NamePros.com http://www.namepros.com/showthread.php?t=732951 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. __________________ Free Forums / GoDaddy Coupon Codes (NEW DOMAIN!) / Free Arcade Script / <?='Your computer is '.(1?fine:broken).'.'?> Last edited by BillyConnite; 10-05-2011 at 05:15 AM.

10-06-2011, 03:19 PM	THREAD STARTER #4 (permalink)
dkr Respect My Authority! Join Date: Jul 2005 Location: Canada Posts: 2,234 Follow @donnyouyang	This worked brilliantly, thanks a million! __________________ Follow Me (new!): @donnyouyang Founder @ Rayku \| Kinkarso Tech

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Need quick fix ''SQL''	wordtubepress	Programming	5	06-27-2011 01:19 PM
MSN scammer!! offers you to be a moderator, don't give personal data!	Jim_Westergren	Warnings & Alerts	54	07-05-2006 06:35 PM
Googlism - What does google think of you?	deadserious	The Break Room	55	12-15-2005 09:09 AM
Xbox 360 hype	andriegel	Domain Name Discussion	5	05-18-2005 11:46 AM

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)