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 • 292,982 visits 110 comments
Tags : , , ,


or Subscribe to specific category only :




  - 110 Comments


Jay says:

Hi,

I am trying to use your code and when I run it, all that shows up is .searchbox and .searchbox_submit. However, they are of different sizes.

The background image does not show up at all even I triple-check the path.

I don’t have a website yet and so I know it could be hard to help without being able to see the code but could you help?

Thanks,

jay

Jay says:

Hi, I tried to use your code but when I run it, all is shows is the .searchbox and .searchbox_submit, both different sizes. The background image does not even show up (I triple-checked the path).

Can you help? I know it’s hard without seeing the code (I don’t have a website yet).

Thanks a ton,

Jay

Kurs says:

That is perfect example. I am working on it on my page ‘notowania walut’. Thank you very much/

praveen says:

Thanx a lott, really nice tutorial,it saved my time too & got idea of structure of search bar easily presenting in css.

have great time …

Robert says:

Very nice article! However, it appears that the links to the images in steps 1 through 3 are broken.

paislee says:

Great tutorial. By what convention does the form submit when the image is clicked? I didn’t expect it to work until I tried it because there is no “submit” type element..

Zen says:

input type=”image” is actually a submit button that uses an image :)

Cheers.

Josh Kellett says:

This was really straightforward and helpful. Thanks a lot man!

Raj kumar says:

this is very cool css button. i like it.

Klik Sekali says:

simple but nice…

abyse says:

Many thanks for this! I using on this website: http://www.hdmusicvideos.info/

works great!

forb says:

This is amazing and i am currently using this on my website, but i have a question. is there a way i can remove the “$x=0$y=0″ at the end of my url after searching?

Zen says:

unfortunately, you need to use javascript to overcome this.

W3B says:

Huh… I can’t find the images… must I create them all by myself? :O ;)

kas5986 says:

thank for sharing exactly what i want :-)

Mukesh says:

Its easy To use.. ;) Thanks..
Nice mate

Arun David says:

Nice search form design… I’ve designed a search form using CSS3 and wrote a blog about it, http://tinywall.info/2012/05/01/fancy-search-box-form-using-css-html-css3/

Yashwant says:

Hi Friends ,

I want to add search field on my website , can you please help which one is suitable for my website.

Thanks

e11world says:

Very useful and easy tutorial. Thank you very much!

need Fancy Search box different design codes, please send me, thanks

SwamyG

Been Getting thank yous on this since you posted and I’m sure youll be getting many more based on how easy this was. I only had one issue with an image but when I tried to open the link in a new tab I saw that it was in the wrong spot. Very nice of you to share this knowledge with us TYVM!

MrsDubin says:

Awesome, just came across this last night and played around with it. Very nice tut!

Thanks so much for this, i’d been looking for a nice quick way to make just one customized search bar on my site :)

Tiny addition to enable disapearing “search text” for those that don’t want to use the widget title.

pari online says:

Now I am going to do my breakfast, afterward having my breakfast coming yet again to
read other news.

Royan says:

Hello, Zen!
I’ve been working with weebly sites and utilize search box provided by google. I’ve tried to put on either HTML web structure, and dropped down html, it wouldn’t work however. Could u tell me how?

Bill Gilmore says:

Great tutorial thanks, hopefully I can add this CSS to an existing search box on a site i’m developing. I guess it would be ok to add the classes to the search_products.php of this site… Wouldn’t you think so?

Umair says:

Nice tutorial thank you Webmaster :)

Crystal says:

Thank you SO very much!!! G+1′d, FB liked/shared, & subscribed!! Thanks again!! :)

Hyder says:

Nice. Weldone. Thanks for it. We can edit it easily.

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
»