View Full Version : Form Text Box problem

11-18-2008, 10:51 PM

I've got a text box in a form that I want to have greyed out text and then disappears as the user enters their details in black. I found some code to do it but its starting out as black instead of grey.
Can anyone help please?

This is the part of the code I added to the form to get the result.

<input type="text" name="s" id="s" value="Text to be displayed here"


11-19-2008, 01:05 AM
How bout this bit of CSS?

#s {color:#b3b3b3;}
#s:focus {color:#000;}

11-19-2008, 08:58 AM
That works great except in Internet Explorer. Is there a tweak I can do for that browser?

Otherwise, thanks so much for the code.

Excellent work


11-19-2008, 09:06 AM
Have a try with

#s:active,#s:focus {color:#000;}

11-19-2008, 10:21 AM

That doesn't seem to work either

In IE the grey text disappears when you click in but what you type is also in grey

In Firefox the text changes from grey to black but doesn't disappear.

Hmmm..must be nearly there


11-19-2008, 10:44 AM
How about

onfocus="if(this.value==this.defaultValue)this.value=''; this.style.color='#000';"

11-19-2008, 12:05 PM
Brilliant...thats done it. Thanks a lot.

I have only two other problems with it which maybe someone could help out.

1) I've tried positioning it on the page and IE and Firefox display it differently. I've read about this before and can't find a clear method to use. I don't want to use absolute positioning as I have the main site content centered on the page.
I really want to use relative positioning but the form 'naturally' sits in a different place in each browser. Furthermore on a previous version of IE, it pushes the below content down.
Has anyone got a quick tip for controlling where you position a form?

2) The other thing is to do with the index page which when a htm or html file you can reach it from just the web address ie www.website.com takes you to www.website.com/index.htm. But if your index page is a php page instead, how do you point the site to it?

Thanks again everyone


11-19-2008, 12:22 PM
1) www.alistapart.com/articles/prettyaccessibleforms may help.
2)Change the DirectoyIndex orders in an htaccess file, see http://httpd.apache.org/docs/1.3/mod/mod_dir.html