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 • 226,504 visits 110 comments
Tags : , , ,


or Subscribe to specific category only :




  - 110 Comments


Darren says:

My day got a hundred times
better after finding this article.

Thanks for posting this!

heman100k says:

yes Darren it is really a wonderful post. See my search box here
http://www.abodevalley.in.

Dindigul says:

Very useful. Thank you so much !
.-= Dindigul´s last blog ..Flash News =-.

Kish says:

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 says:

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

Rich says:

Do you have a live sample of it anywhere?

I’d love the test it out in a few browsers.

Cheers

zen says:

@Rich, in fact all my premium themes have it , eg : http://zenverse.net/?themedemo=exult

Felix says:

Great tutorial. exactly what i needed.
Thanks

inno says:

this is fantastic !

Sana says:

Hey, it worked great in other browsers but in IE7, the image “.search_submit” is grayed with asterisks. on the whole, great tutorial…

Pedro says:

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

zen says:

I am not sure because as I know, we are not allowed to edit any codes given by google, it is against the TOS.

Josh Katherman says:

Beautiful work, just implemented it on my blog! Thanks a ton =]

Kim Ryu Hyun says:

Thanks so much! This is so helpful in the last mile of our site.

It will be opening pretty soon.

krahamath says:

Very nice work… Thank you !

Dazy says:

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

Lisa says:

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

David says:

Excellent my friend! very usefull and clean code! THAAAAAAAAAAANKs!

Mark says:

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.

chamara says:

does this search box work with php..??
background image is not comming…(php page)

Gijs says:

Hello,

Zen: I used your example for my site and am very happy with it.

Mark: Guess your image location is not right

Max says:

Thanks a lot! Really nice article and solution. It’s on http://www.connectionstrings.com now. Very nice!

Keith says:

Wow. Genius! You saved my day!

Anna says:

I love you I love you I love you I love you I love you… nice article :)

Michael says:

Thanks for the useful things. Those are really helpful for me…

d says:

Awesome ,

Thanks, it was great.

Samuel says:

nice article, saving my time
thx

谢谢 says:

i’m a total noob and i just me self a beautiful search box…. thank you!! =)

Alex says:

Thank you very much for sharing your knowledge. You helped me a lot !!!

Steven says:

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?

Kopi Ice says:

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 ?

lpm says:

This is happening with me as well…

Anyone??

Rxbbx says:

Thnx for sharing this.

Mike says:

finally I managed not to replace my ugly search box with that cool box. ThX! :)

Hussain says:

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…

sathi says:

Thank you very much,It saved my time

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
»