jQuery Add Default Text To Search Input Box
Share
Use jQuery to add default text to your search box. Simple but effective!
- The text dissapears when you click the search box
- The text shows as default when the box is empty
- The box appears shaded and is highlighted whiter when you hover over it
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: