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.


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="" />

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-repeat:no-repeat; /*important*/
position:relative; /*important*/
#searchwrapper form { display:inline ; }
.searchbox {
border:0px; /*important*/
background-color:transparent; /*important*/
position:absolute; /*important*/
.searchbox_submit {
border:0px; /*important*/
background-color:transparent; /*important*/
position:absolute; /*important*/

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.

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 • 302,028 visits 110 comments
Tags : , , ,

or Subscribe to specific category only :

  - 110 Comments 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


Andreas says:

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:


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.


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…


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.


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.


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

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

Jalkesh says:

Simple Superb, Easy!!!

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


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?


Zac says:

Hi There,

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



Niall says:

Unfortunately this solution posts the coordinates of the click on the image which means you’ll get something like

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.


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:


This is also how i usually do it and it works great.
Although you wouldnt do this on a site with many visitors.


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.


  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