CSS3 Search Box

Hi Guys,

For another website that I launched today I wanted to have really cool CSS based styled Search box.

So I designed one for myself and thought its worthwhile to share.

The final product look like this

CSS3 Search Box

If you don’t like the above outcome you can edit the CSS to suit your design.

Below is the code for this search box

[geshi lang=”html5″ nums=”1″ target=”_self” ]

<!-- [if IE 6]>

<![endif] -->

CSS Search box

For IE there is only a slight variance in looks because it clearly don’t support background gradients. SO to look atleast OK in IE I’ve made one IE specific change.

You can change backgrounds to suit your theme, its really easy to change.

Tested on IE9, Firefox and Chrome.


Should work fine on

Internet Explorer, Chrome and Firefox support


I hope this CSS3 search box will help you.

Please leave you comment to give me feedback.





  1. Hi! i come from Italy so i ‘m dorry if i don’t speak english very well!
    I’d like to change the width and the height of this search box but i don’t know how to do…can you help me?
    I’ve tried to change this value (width:670px;) but if i do this there are many problems about proportion.
    Can you help me? thanks!
    I’d like to align this search box in a center position…
    Thank you su much for your help!

    • When you try to change the width you will have to bring corresponding change to #jcorg_search input as well otherwise everything will seem to mess up. Now you can centre your search box many different ways. Depending on how you page is setup you can add this to #jcorg_search { maring:0 auto} to centre it on the page. This will work most of the times.
      I hope I understood you question rightly.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.