JavaScript

jQuery Add Default Text To Search Input Box

Sam Deering
Share

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

jquery-default-search-box-text

See Live Demo

The following goes into the JavaScript:

$('#search').blur(function(){
	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:
search-icon