CSS3 Search Box Inspired by Apple.com

Today’s tutorial is on creating Apple-inspired search box or search field using CSS3 alone. The search field expands slowly when focused/clicked. This animation effect achieved purely using CSS3 transition property. Also, we have used other CSS3 properties such as border-radius, box-shadow and text-shadow to create cool effects.

Here is the code for the searchbox.

<form method="get" action="/search" id="search">
  <input name="q" type="text" size="40" placeholder="Search..." />
</form>

And the following are CSS codes of three different styles of the search box.

Search Box on Dark Background

#search {

}

#search input[type="text"] {
    background: url(search-dark.png) no-repeat 10px 6px #444;
    border: 0 none;
    font: bold 12px Arial,Helvetica,Sans-serif;
    color: #777;
    width: 150px;
    padding: 6px 15px 6px 35px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    text-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
    -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
    -webkit-transition: all 0.7s ease 0s;
    -moz-transition: all 0.7s ease 0s;
    -o-transition: all 0.7s ease 0s;
    transition: all 0.7s ease 0s;
    }

#search input[type="text"]:focus {
    width: 200px;
    }

Search Box on Light Background

#search {

}

#search input[type="text"] {
    background: url(search-white.png) no-repeat 10px 6px #fcfcfc;
    border: 1px solid #d1d1d1;
    font: bold 12px Arial,Helvetica,Sans-serif;
    color: #bebebe;
    width: 150px;
    padding: 6px 15px 6px 35px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
    -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
    -webkit-transition: all 0.7s ease 0s;
    -moz-transition: all 0.7s ease 0s;
    -o-transition: all 0.7s ease 0s;
    transition: all 0.7s ease 0s;
    }

#search input[type="text"]:focus {
    width: 200px;
    }

Apple.com inspired Search Box

#search {

}


#search input[type="text"] {
    background: url(search-white.png) no-repeat 10px 6px #444;
    border: 0 none;
    font: bold 12px Arial,Helvetica,Sans-serif;
    color: #d7d7d7;
    width:150px;
    padding: 6px 15px 6px 35px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    text-shadow: 0 2px 2px rgba(0, 0, 0, 0.3); 
    -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
    -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
    -webkit-transition: all 0.7s ease 0s;
    -moz-transition: all 0.7s ease 0s;
    -o-transition: all 0.7s ease 0s;
    transition: all 0.7s ease 0s;
    }

#search input[type="text"]:focus {
    background: url(search-dark.png) no-repeat 10px 6px #fcfcfc;
    color: #6a6f75;
    width: 200px;
    -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
    -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
    text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
    }

Have a look at the demo or download the source file. Drop your comments down here if you have any suggestions or opinions about this cool CSS3 Search box.

June 8, 2011. This entry was posted in CSS, Design, Tutorials and tagged . Bookmark the permalink.

We Recommend HostGator Hosting

Bloggermint strongly recommends Hostgator Hosting for all of your web hosting needs. Sign up today for WordPress Hosting at just $4.95/month.

Use coupon code "bloggermint" to get 25% discount on any hosting packages. Get an account with Hostgator now!

62 Responses so far!

  1. This is a great way to do things, more browser friendly and still looks very sleek! Many thanks for releasing.

  2. Fantastic! Would have saved me a lot of time! Thanks very much, would recommend to anyone.

  3. Hey great ! This code really produces very wonderful Search Box. Hey, how to use this for Web Search / Search within Site?? Do we have to replace url by {Site url / http://www.google/search} ??????

  4. Hey, one more question from me please. I want my Search Box to be of this type, since its matching my LOGO. How nd where to copy these codes. I have done in Searchform.php. Did not work….. Shall I save it as .CSS??? Give me some suggestion??

  5. Hi, you’re a wonderful person! Many thanks for sharing this with us. One further request if I may. Is there a way to get rid of the glows in the search field in browsers like Chrome, Firefox etc? I mean the glow that appears when you place your mouse cursor on the search field. That will look even better. There isn’t such glow on apple.com. Sorry if I’m too picky :) Thank you again.

    • Instead of this
      #search input[type="text"]:focus {
      width: 200px;
      }

      Do this
      #search input[type="text"]:focus {
      width: 200px;
      outline:none; box-shadow:none;
      }

  6. Hei !
    Nice One… But How To Insert This To My WordPress,I Can’t Understand…

  7. How to use this in Blogger please describe……………………

  8. @genevois
    In css (input:focus) add this line: outline:none;

  9. It’s very nice tutorial. but, how to apply this on top right of my blog..
    Thank you in advance..

  10. hi there, thanks for that tut. i just want to ask how to create the rest icon !

  11. very nice :) but how can i make the transition occur from right to left like in apple.com ?

  12. Awesome man :D u did well…

  13. Very helpful. Thank you!

  14. Thank you!

  15. Hi

    Nice box but when it gets the focus, a border appears. At least in Chrome. Any idea how to get rid of the (ugly) border ?

  16. Exactly what I need, thanks for sharing.

    Will be using this with Google Search and provide you with a feedback once I get it working ;)

    • Was able to make it work with Google Custom Search for a website i’m doing – pepsquadevents.com/beta/results.html

      Used the two page layout and removed Google’s css with the search box found here, styled the submit button a bit.

      Bloggermint’s custom site search is way funkier though!

      Thanks again and keep up the good work! :)

  17. Thanks dude! This is exactly what I was looking for. Is there an easy way to create a fallback using jQuery?

  18. I was looking for these search boxes, great share

  19. Thank u so much… I use this search form in my blog :)

  20. big thanks for this tutorial. more power!

  21. ok, so i tried it, and the box shows up but the magnifying glass and the words “search…” isn’t there, help me?

  22. ranggadablues

    ya same as koen, how to remove the “ugly” border on chrome

    thanks

  23. It looks beautiful on Firefox and Opera. Thanks
    But I get an ugly border on Safari! How do I remove it?!

  24. cool, but no search icon (loop image) on the left :D

  25. Very nice design, but how apply the action of the form?
    If I use a js associated at behavior onblur is not really friendly for user, some idea?
    Thanks in advanced

  26. Hey! great post!

  27. Nice job!

    Well, I’d like to make a suggestion.
    In the CSS for:

    input[type:"text"]:focus …

    you can add:

    {…; …; outiline:none;}

    That’s it!

    Very wonderful job!
    Congratulations!

    Att.
    Marinho

  28. Hi – thanks for the awesome tutorial. It’s a great starting point- I’m adding ajax search and a drop down box including images to make it even more like apple.

  29. add one more property to input box
    outline:0;

  30. and how to make that not happen if you have already completed the folding box? and clicked outside the form

  31. I would love to use this, but it is not compatible with other browsers. Can you cake it compatible with the dreaded internet explorer?

  32. Great tutorial!

  33. Thank you for this tutorial. I did not know about “transition.” It’s like having a bit of jquery, but 100x easier to do! I know it’ll not work for older browsers, but fortunately, it will have no effect at all.

  34. This is great. best search bar on the entire internet.

    I have one embarrassing question. so i put this on my site but how to you specify the search results to go a specific area of your site?

  35. It’s quit helpful.

  36. How do you get it to expand the other way around? Instead of it expanding from left to right, how do you get it to expand from right to left?

    • in the #search input[type="text"] { put “float:left” if you want it to move to the right.. or “float:right” for the other way around!

  37. Thank you so much.

  38. Mohammad Hamza

    fine tutorial but a error in the third style.
    background: url(search-dark.png) no-repeat
    no url of bg?

  39. smart. one fail is that my latest version firefox doesnt search typed text.

  40. Nice post .. I’ll try to follow your instruction to build a smart Search box in my website . If I’ll face any problem, then I’ll surely let you know.

  41. Hello, thank u so much!! it works perfectly!…. But i have a question do anyone knows how to implement google costum search engine with this search box?
    Thank U in advance, i would be really greatfull :D

  42. Its really awesome and useful tutorial…thanks for sharing :)

  43. Great! Pure CSS solution that still looks nice and is completely functional in IE7 and IE8. Had it implemented on my site in less than 5 minutes.

  44. Funciona muy bien pero no se ve la lupa en mi search box

  45. Question, How would I apply this same style all throughout the form. For instance, the option drop down lists and submit buttons too. I mean, it’s kind of useless to use this beautiful textboxes with the rest of the form

  46. naveen kumar

    Thank you!! great post

  47. Very nice! Thank you for sharing!

  48. Thanks you very much for tips !!

  49. does anyone know how to alter the margin on this? its seems to want to stay in my nav but not budge leaving a gap between it and the end of the nav! ?

    • outline-style:solid;
      outline-color:grey;/*your background color… */
      outline-width:4px;
      so i dont see the box borders when writting…

  50. You are amazing! Thank you so much for sharing this.

  51. Hello!
    This is really excellent, but I do have a question. I tried to put the class definitions in a separate CSS file instead of using the tags in the main body of the html document. However, when i do that, the magnifying glass image cannot be found. Everything works perfectly if i use the tags, but i would rather put in a separate file. Does anyone know why the images would not work if i put code in a separate css file. Below is the link i am using. The link works perfectly if the class is defined in the main HTML but is broken if i put in a separate CSS file. Thank you for your help in advance.
    background: #444 url(site_images/search-dark.png) no-repeat 10px 6px;

  52. thanks a lot…nice doing…I added also an
    outline-style:solid;
    outline-color:grey;/*your background color… */
    outline-width:4px;
    so i dont see the box borders when writting…

    thanks a lot

  53. I love this and easy to implement. The only issue I am having is using on my blog it wants to redirect the search to http://domain.com/search-result/?q=keyword and needs to go to http://domain.com/?s=keyword. How do I do change the form code to directly correctly. BTW… Using this in sidebar for WordPress.

    Thanks in advance to anyone that can assist :)

  54. Okay I am no programmer but I just figured this out for all the WordPress users that commented above and didn’t get a reply on how to update the code. Here is what you need. Just two minor tweaks to the orig code. Copy and paste this into your text widget and you are gtg.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>