12 Search Form Tutorials Using CSS3, HTML5 and jQuery for Inspiration

14 Oct , 2012  Design Inspirations 

Inspiring design article to know some great designs of search form and search bar Search Form Tutorials Listtutorials. Search form is the most basic need for any website to enable the visitor to explore the needs from your website. It is a necessity for designers and other newbies for the possibility of search form designs already available on the net teaching us to create one for free ready made.

Today, we are not far off from seeing the list of some of the most inspiring search form tutorials using recent technologies like jQuery, HTML5 and CSS3. Here is the list below for your reference (Please click on the title of the tutorial to go to the respective tutorials)

1) Cool Usable CSS3 Search Box

Search Box CSS3

Features: This is a nice CSS3 search bar with HTML5 placeholder in place. The browsers not supporting the HTML5 placeholder, the designer has created a fallback using Modernizr’s feature detection.

2) Beautiful CSS3 Search Form

Features: This is a beautiful CSS3 search bar, where the designer has kept in mind non-css3 browsers. The CSS3 border-radius property is used not only to design the search bar but also the submit button (Making it circle).

3) Loooong The Search Bar

Features: This search box has been named “Loooong The Search Bar” because, it can expand by itself when you click on the search input area. This animation is created only using CSS3 and not using any scripting languages like jQuery or Moo-Tools. Though, you don’t find any tutorial explaining each bit of the code written, but you find some demo and the full functional code in jsfiddle from the below demo links.


4) Grooveshark Search Box

Features: This search box has been inspired from the music website Grooveshark.com. This search box uses CSS3 and submit icon.

5) Fancy Search Box Using CSS

Features: This is a fancy search box using only CSS and search box image in the background.

6) CSS3 Search Box

Features: This search bar is an awesome looking search box which uses CSS3 pseudo elements.

7) Beautiful Form field using CSS & Images

Features: This search form is a beautiful bar which uses only CSS and images. Perfect search box without using CSS3.

8) Beautiful CSS3 Search box

Features: This is again a CSS3 and HTML5 placeholder feature.

9) Google Powered Search box

Features: This is my favorite search bar. This search box is a custom Google search box, which can individually search from Google, images, and videos. This search box is designed using jQuery AJAX feature, HTML5 and CSS3.

10) Apple inspired Search box – Expanding Search box

Features: This search box design is inspired from Apple using only CSS3. Two designs available ready made – Dark and Light search box.

11) jQuery Search Box

Features: As the name says, this is a jQuery search box using CSS3. Again an Apple inspired search bar.

12) Rocking and Rolling Search Box With jQuery

Features: Rocking and Rolling rounded search bar is a well designed by Tympanus. Awesome looking menu search bar using jQuery and CSS3.

Few More Updates:

Realistic Soft Search Box in Pure CSS


Suggestion Search Box in Pure CSS


Hope you enjoyed the inspiration feed today. If you know more such tutorials which have inspired you, please share them with us to get them listed here for our lovable readers.

, , ,

  • Was wondering if these searches downgrade gracefully? Thanks!

  • Harjeet Singh

    Thanks for sharing the list.

  • DavidZIP

    10Q very much