Create a Fancy Search Box using CSS

Post image of Create a Fancy Search Box using CSS
Posted in Design Tips on 8 June 2009 110 comments

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.

Let’s start

1. Design your own search box


In this example, I will use this as my search box.

2. Crop it out

Make sure the background color outside the search box is the same as your design. Now crop the whole search box out.

result:

3. Create a blank image as submit button


The picture above explained all.

4. HTML codes for the search box

<div id="searchwrapper"><form action="">
<input type="text" class="searchbox" name="s" value="" />
<input type="image" src="THE_BLANK_SUBMIT_BUTTON_IMAGE" class="searchbox_submit" value="" />
</form>
</div>

Replace the “THE_BLANK_SUBMIT_BUTTON_IMAGE” with the image at step 3.

5. CSS codes for my search box

#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.

That’s it.

Hope this helps!

 

Posted by Zen on 8 June 2009 • 283,697 visits 110 comments
Tags : , , ,


or Subscribe to specific category only :




  - 110 Comments


findpdf.net says:

nice article, I used to design search box on my site. thanks

Jeff Kamo says:

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!

doron says:

the background is not doing the background-repeat:no-repeat; in IE8
the background is appering twice

thanks any help

doron

Andreas says:

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!

Axel says:

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!

lpm says:

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??

Trevor says:

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…

Color generator says:

I was just searching for that, thx for posting this!

gautam says:

thx dear… ya its great article..
its very helpful for me.

thanks

jordan says:

Damn…damn….Shooooooooooooooooootttt!!!!!!! very2x…Good!!! thx man a lot…

Jess says:

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!

Jay says:

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

รับทำเว็บไซต์ says:

Awesome! I can’t wait to give this a try!

Jalkesh says:

Simple Superb, Easy!!!

Copy, Paste and change as per instructed WORKS!!!!!!!!!!

Thanks.

SergeyDruid says:

Thank you very much, it was very useful!

XTC says:

WTF? You call this a tutorial?

Nothing works here apart from all the in-house spammers!

powellian says:

Nice one! Does what it says on the tin, and quickly – thanks.

adam says:

thanks for this tutorial. been driving me nuts

sinh says:

superb man thanks a ton for help

nithin says:

nice,it will implemented on my website,thak u so much

mohamed yahia says:

so nice post mmm i like it and i want to say thanks for sharing :)

Zac says:

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

Zac says:

Hi There,

How do i add make it so people can search through it? Pease help

Thanks

Zac

Niall says:

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” />

Niall says:

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.

Niall says:

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;

Mathias Poulsen says:

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

Oak says:

Thanks a bunch, mate!

Jo says:

How do I amend the code to just have a normal search box and not one created? Thanks in advance.

Ganesh says:

Thank you very much,It saved my time and easy to use…

Majo says:

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.

Trackbacks

  1. Showcase of Inspiring Search Box Designs - Noupe Design Blog
  2. Showcase of Inspiring Search Box Designs « Downgraf – Design weblog for designers
  3. Campos de búsqueda en HTML y CSS | SummArg
  4. Create a Fancy Search Box using CSS « Kỹ Thuật Lập Trình ASP.NET
  5. Create a Fancy Search Box using CSS | 阿華的小站
  6. Customized Search Box Problems
  7. 10 casute de cautare in CSS « CoolTips
  8. 12 Search Form Tutorials Using CSS3, HTML5 and jQuery for Inspiration | A Web Design-Development Blog

Leave a Reply

You must be logged in to post a comment.

Previous Post
«
Next Post
»