A good looking search box can give your site an extra kick. A lot of sites have stylish search boxes with an eye catching search icon for the submit button.
Some examples of these sites are digg.com, live.com, and cnet.com.
If you would like to save some time, it is good practice to reuse certain web design elements. In this short tutorial you will learn how to quickly create a search box that is easy to do and visually appealing.
Note
The code for this search box is designed for wordpress, but could be easily modified to work with another cms.
I’ve used a search box like this one on many cms’s including Pligg, PhpBB and Wiki-Media.
You must have a valid doctype
Here is a list of valid doctypes.
I’m not going to explain what each particular part of the code does because it’s pretty self explanatory.
The xhtml
<div class="search-box"> <form method="get" action="<?php bloginfo('url'); ?>/"> <input type="text" size="15" class="search-field" name="s" id="s" value="Search.." onfocus="if(this.value == 'Search..') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Search..';}"/> <input type="submit" value="" class="search-go" /> </form></div>
The css
form{margin:0;padding:0} .search-box{ /*outer background*/ background:url(images/search-box.gif) no-repeat top left; height: 26px; padding: 5px 0 0 10px; width: 165px; } input.search-field{ /*input field */ float: left; border:0; margin:0; font-family:tahoma; font-size: 12px; padding: 3px 0px 0px 4px; height:18px; background: #ffffff url(images/search-form.png) no-repeat top left; width: 123px; } input.search-go { /*search icon */ float:left; border:0; margin:0; padding:0; margin-left: 5px; height: 21px; width: 21px; background: url(images/search-icon.png) no-repeat top left; cursor: pointer; } input.search-go:hover{ /*search icon hover "Does Not work in ie6" */ background:url(images/search-icon.png) no-repeat bottom left; }
The Images Used
Source Image for search icon
Feel free to make comments and leave trackbacks.
This is exactly what I was looking for!
Very nice and neat 2.0 search box, i think i will use this on my sites.
thanx.
Hi,
sorru i fixed it, but will it work in ie6?
Cheers
Hi there,
I tested it on IE 6. I does not completely works.
Although you can see the search box and the graphics but when you hover over the search button you don’t see the button turn blue like it does on other better quality browsers.I think this is good enough.
I am trying to implement it with my custom search engine made by Smart Spidey (http://www.smartspidey.com) for my website.
-Gates
Yes the hover does not work in ie6. I commented that it does not work in ie6 in the css.
Thanks bro! I will have up on my website in a couple days. It was as easy as copy and paste. Take care.
excellent, i would also like to see more such releases from you!!!!!!!!
Man, I can’t wait to plug this into the redesign I’m concocting. Eric Watson (commenter above) steered me to this via SitePoint. Nice job!
For the record, I don’t give a d@mn if the hover doesn’t work in IE6, though if you guys do concoct a fix I’d be glad to hear about it.