Nowadays, most websites come with a search box to improve surfing experience. To make your website looks good, beside having a nice looking theme, you would need a fancy search box to replace the classic ones.
In this example, I will use this as my search box.
Make sure the background color outside the search box is the same as your design. Now crop the whole search box out.
result:
The picture above explained all.
Replace the “THE_BLANK_SUBMIT_BUTTON_IMAGE” with the image at step 3.
#searchwrapper {
width:310px; /*follow your image's size*/
height:40px;/*follow your image's size*/
background-image:url(THE_SEARCH_BOX_IMAGE);
background-repeat:no-repeat; /*important*/
padding:0px;
margin:0px;
position:relative; /*important*/
}
#searchwrapper form { display:inline ; }
.searchbox {
border:0px; /*important*/
background-color:transparent; /*important*/
position:absolute; /*important*/
top:4px;
left:9px;
width:256px;
height:28px;
}
.searchbox_submit {
border:0px; /*important*/
background-color:transparent; /*important*/
position:absolute; /*important*/
top:4px;
left:265px;
width:32px;
height:28px;
}
Basically what’s going on :
#searchwrapper wrap the whole search box, carrying the whole search box image as its background image.
.searchbox is the text area to enter search keyword, given a transparent background and no border.
.searchbox_submit is the submit button, also given a transparent background and no border.
NOTE:
Both .searchbox and .searchbox_submit have been given an absolute position, you should modify their position, width and height according to your own search box.
Hope this helps!
My day got a hundred times
better after finding this article.
Thanks for posting this!
yes Darren it is really a wonderful post. See my search box here
http://www.abodevalley.in.
Very useful. Thank you so much !
.-= Dindigul´s last blog ..Flash News =-.
Hi,
Very Very thanks. It helped me a lot for developing my new version of site for Topincoupons.com
Once again very thanks,
Keep your good work.
Hi,
Very Very thanks. It helped me a lot for developing my new version of site for Topincoupons.com
Once again very thanks,
Keep your good work.
.-= Kish´s last blog ..Save $50 when you spend $250 or more =-.
Do you have a live sample of it anywhere?
I’d love the test it out in a few browsers.
Cheers
@Rich, in fact all my premium themes have it , eg : http://zenverse.net/?themedemo=exult
Great tutorial. exactly what i needed.
Thanks
this is fantastic !
Hey, it worked great in other browsers but in IE7, the image “.search_submit” is grayed with asterisks. on the whole, great tutorial…
Great tutorial… where can I get the script to have this work on a site, will this mask Google’s search box?
I appreciate any help thanks!!
I am not sure because as I know, we are not allowed to edit any codes given by google, it is against the TOS.
Beautiful work, just implemented it on my blog! Thanks a ton =]
Thanks so much! This is so helpful in the last mile of our site.
It will be opening pretty soon.
Very nice work… Thank you !
Hi,
I want to create a seach box with button like the one in header of BBC site. i.e. http://www.bbc.co.uk/
Can you help me on how to create that type of buttons and textboxes?
Thanks,
Dazy
Hey, I’m trying to do that as well for a web layout but nothing is showing up whenever I preview it Google Chrome and Microsoft Internet Explorer. How can I get it to show up? This is what I have so far.
https://picasaweb.google.com/lsrms3977/May62012#5739613931993134130
Can anyone help me?
Thanks,
Lisa
Excellent my friend! very usefull and clean code! THAAAAAAAAAAANKs!
So for some reason I follow this, and take the search box you are using. It shows as a blank white image, and the search button is also blank. I guess I’m doing something wrong.
The search button has to be blank correct? a white or transparent image, and the search box it self I keep intact? because it matches the dimensions of your example one.
Any help would be appreciated, maybe even a zip download with an example. I think im just doing something dumb that is making it not work.
thanks.
Mark.
does this search box work with php..??
background image is not comming…(php page)
Hello,
Zen: I used your example for my site and am very happy with it.
Mark: Guess your image location is not right
Thanks a lot! Really nice article and solution. It’s on http://www.connectionstrings.com now. Very nice!
Wow. Genius! You saved my day!
I love you I love you I love you I love you I love you… nice article :)
Thanks for the useful things. Those are really helpful for me…
Awesome ,
Thanks, it was great.
nice article, saving my time
thx
i’m a total noob and i just me self a beautiful search box…. thank you!! =)
Thank you very much for sharing your knowledge. You helped me a lot !!!
This is excellent, however I have a minor issue.
In Firefox and Chrome the text is vertically centered on top of the background image, however in IE (8) the text is at the very top. Any ideas?
Thanks, it works for me too.
However i have the same minor issue like you.
It happen on IE8. Is there any css can fix that ?
This is happening with me as well…
Anyone??
Thnx for sharing this.
finally I managed not to replace my ugly search box with that cool box. ThX! :)
Very professional, thank you so much for this great tutorials… I was struggling in days with my search module with no result, I was about to give up but my final search on google gave me your great and beautiful solution… Very appreciative… Thanks again…
Thank you very much,It saved my time