CSSKarma

Main Nav:

• home
• articles
• lab
• research
• portfolio
• contact

Social Nav:

• facebook
• twitter
• dopplr
• plurk
• pandora

Extra Nav:

• RSS
• Twitter
• FatFold

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(); } } })();

with ease,
tim