Skip to main content

jQuery Add Default Text To Search Input Box

By Sam Deering



Use jQuery to add default text to your search box. Simple but effective!

  1. The text dissapears when you click the search box
  2. The text shows as default when the box is empty
  3. The box appears shaded and is highlighted whiter when you hover over it


See Live Demo

The following goes into the JavaScript:

	if (this.value == '') {
		this.value = 'Search BLOGOOLA';

The following goes into the HTML:

The following goes into the CSS:

#searchform { opacity:0.8 }
#searchform:hover { opacity:1.0 }
#searchform fieldset { border:0px; padding:0px; margin:0px; }
#searchform input { width:190px; height:16px; margin:0px 0px 0px 10px; padding:2px 5px 2px 5px; border-width:1px 1px 1px 1px; border-style:solid solid ridge solid; font-family:Arial, Helvetica, sans-serif; font-size:small; }
#searchform button{ float:right; width:30px; height:22px;  margin:0px 0px 0px 0px; padding:0px 0px 0px 0px; border-width:1px 1px 0px 1px; border-style:solid solid ridge solid; background-repeat:no-repeat; background-image:url('../images/search.png'); }
#searchform button:hover { cursor:pointer; background-color:#E2E2E2; }

This is the image for the form button:

Sam Deering has 15+ years of programming and website development experience. He was a website consultant at Console, ABC News, Flight Centre, Sapient Nitro, and the QLD Government and runs a tech blog with over 1 million views per month. Currently, Sam is the Founder of Crypto News, Australia.

Integromat Tower Ad