Putting an Image or Text in a Text Input Field with CSS

Google Custom Search can do it? How can I?

[wfernley]

Hey everyone,

I have a login form that has two input boxes - one for the username and for the password (complicated eh!).

I want to make the username feild say "Username" in text or an image and then when the user clicks the field to enter their info, it disappears. Is this possible with CSS? It would be similar to what Google does with their Custom Search text field.

Thanks in advance for your help!

Wes

[Fotiman]

You'll need a mix of CSS and JavaScript. If you Google for compact forms, you will find some tutorials on how to do this.

[sgietz]

If I understand correctly, you could simply create a textbox like so:

<input value="Username" type="text" onfocus="this.value='';">

[Fotiman]

<input value="Username" type="text" onfocus="this.value='';">

That would erase whatever the user had entered each time they put the field in focus... probably not very good for usability.

[sgietz]

Yea, but I think that's what wfernley is asking.

[Fotiman]

Yes and no. Once data is in there, you don't want to remove it. What he/she really wants is to show/hide the field label, positioning it so the label is over the input field. This way, it's still accessible for those using screen readers, etc. Like I said before, a Google for "compact forms" will find tutorials for doing this.

[Setek]

I use javascript for this - usually on Search boxes. I check on focus whether the content contains "Search keyword(s)" and if it does, change the value to "". If it doesn't (basically, if the user has changed it in some way,) don't do anything.

<input type="text" id="form-search" onfocus="if(document.getElementById('form-search').value == 'Enter keyword(s)') { document.getElementById('form-search').value = ''; }" title="Search the Site" value="Enter keyword(s)" />

I haven't checked out compact forms but I think I'll take a look at it :)

[wfernley]

Thanks for the script Setek. That does exactly what I need. :)