CSSKarma

display your <style>

designing the web since 2002

Searchbox Background Image

It's pretty basic stuff, but I like the effect it gives and it allows more freedom in designing a go button without having to put the word "search" in it. The onblur effect is nice, it replaces the background image if you move off the searchbox while it's empty. Anyways, enjoy!

HTML
<form name="search" method="get" action="http://www.google.com/search" id="search">     
<label for="q">search:     
<input type="text" id="q" name="q" />     
<input type="hidden" value="www.yourwebsite.com" name="as_sitesearch" />     
<a href="javascript:document.search.submit()"><img src="images/go.jpg" alt="search this site"/></a>
</form>
CSS
#q{
   border:solid 1px #7F9DB9;
   width:112px;
   color:#000;
   height:auto;
   font-size:90%;
}
JavaScript
(function() { 
var f = document.getElementById('search'); if (f && f.q) { 
var q = f.q; var n = navigator; var l = location; if (n.platform == 'Win32') {} 
var b = function() { if (q.value == '') { 
q.style.background = '#FFF url(images/bg_search.gif) center no-repeat'; 
} }; 
var f = function() { q.style.background = '#FFF'; }; q.onfocus = f; q.onblur = b; if (!/[&?]q=[^&]/.test(l.search)) { b(); } } })();

Featured writing