How do you make this kind of search box? [HTML/CSS]
 

How do you make a search box that says "Search..." and when you click on it, it removes the search text so you can enter in your desired text. When you click off of it it displays "Search..." agian. How is this done in html, css, or js, etc?

javascript onfocus event search for that

Curious myself. I got that on my blogs that allow search, and as far as usability goes, it's a pain for the user. One of those small peeves that I find irritating yet haven't fixed yet either, lol.

add this to the input html
onfocus="this.value=''"
onblur="this.value='Search...'"

That works but it doesn't show "Search..." on load + when you click off with your desired text string it gets replaced with "Search...". Also when no search string is entered and you hit the enter key it will search for "Search".

That worked.

I'm using a php script and the default value was:

value="{$g_term}"

replacing it with value="Search..." ok? I'm trying to figure out what that $var is for and if I can replace it safely.

{$g_term} is probably used for the term that a user is searching for. So, someone searching for "keyword" will automatically put that term in the box.

Thanks mattodue.

The search box seems to be working fine without that $g_term variable.

I wish people were so willing to help when someone asks a business question...

Some of us are, just depends who's around when the question gets posted I guess.

Developers come from a different stock ;)