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!
nice article, I used to design search box on my site. thanks
Hi, this is great and I’m glad you posted this article. I’ve been looking for a solid solution for CSS form styling fields.
Only problem is, in Chrome and Safari (so, webkit) the submit button (the input type=”image”) retains a 1px border around it. Otherwise, in Firefox and Opera it looks fine. I have yet to do IE testing, so we’ll see how that goes…
Any idea why this is happening only in webkit? Thanks!
the background is not doing the background-repeat:no-repeat; in IE8
the background is appering twice
thanks any help
doron
Great!!!
Thank you very much for sharing! ;-)
I don’t know if somebody else mentioned this.
I used it (changed it a little) and set action=”search.php” method=”get” and I get two more values sent to search.php. A x and and y variables.
No problem at all.
Thx again!
SUPERB!
best tut ive seen about this simple yet v effective box.
i used mine for a simple signup to newsletter box on the home page.
had issues with another tut out of IE. this ones works prefect on all browsers.
thanks!
I’m having the same problem as Steven…n 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…
Anyone??
Try putting in a line-height equal to the height of the input box (.searchbox_submit), so in this case 28px, that seemed to do the trick for me…
I was just searching for that, thx for posting this!
thx dear… ya its great article..
its very helpful for me.
thanks
thanks.
Damn…damn….Shooooooooooooooooootttt!!!!!!! very2x…Good!!! thx man a lot…
This is such a great tutorial! I need to do some tweaking with my design, but the code is great.
Just one question (and forgive me if this is stupid–I’m new at this whole html and css thing): how do I get the search box to actually search my site? I can get the images to display fine and I can type in the box, but once I submit the search terms, it just reloads the same page.
Thoughts? I really appreciate your help!
Works like a charm…thanks for the effort here. It’s clean and simple…I like. I’ve commented my code to attribute credit to you.
Thanks
Thank you!!!
Awesome! I can’t wait to give this a try!
Simple Superb, Easy!!!
Copy, Paste and change as per instructed WORKS!!!!!!!!!!
Thanks.
Thank you very much, it was very useful!
WTF? You call this a tutorial?
Nothing works here apart from all the in-house spammers!
Nice one! Does what it says on the tin, and quickly – thanks.
thanks for this tutorial. been driving me nuts
superb man thanks a ton for help
nice,it will implemented on my website,thak u so much
so nice post mmm i like it and i want to say thanks for sharing :)
On Step 5 where abouts do i put the CSS Code, plesae help! Will it search my site automatically with the code or do i need to put them if, if i do how?
Thanks
Hi There,
How do i add make it so people can search through it? Pease help
Thanks
Zac
Unfortunately this solution posts the coordinates of the click on the image which means you’ll get something like http://mywebsite.com/?s=test&x=0&y=0
Now there are many ways that this can be overcome with Javascript, but try replacing <input type="image"…. line with the below:
<img src="/images/search_submit.gif” />
Grrr – won’t post my code.
See http://stackoverflow.com/questions/1971813/how-does-digg-remove-x-0y-0-from-their-search-results-url
Answer 2 where you use a transparent submit button surrounding your transparent submit image.
Unfortunately my above tip removes the hand pointer when hovering over the transparent submit image, so it doesn’t look like a submit button.
Correct it by adding this to your img style:
cursor: pointer; cursor: hand;
Hello,
This is also how i usually do it and it works great.
Although you wouldnt do this on a site with many visitors.
Regards
Thanks a bunch, mate!
How do I amend the code to just have a normal search box and not one created? Thanks in advance.
Thank you very much,It saved my time and easy to use…
Hi! Thanx for this tutorial, I was looking for it since a long time ago.
I have a problem, I followed every step I just changed the things that you required but when I preview my homepage the search box doesn’t work, I fixed the position and everythinb but it looks like it were an image not a space to write and press the submit button…
I don’t know if it doesn’t work because I haven’t uploaded at my site I’m just forming the site and I’m trying in it in my computer.
hope yo can help me.