Build your own Firefox like Multi Search Box for your site

As you all might have already observed our site WittySparks is growing with many quality services like BLOGs, NEWs, ViDEOs, TOPiCs, QUOTEs, GAMEs and more to come soon. So thought to have a simple and user friendly Global Search Form to search all my services provided with customized service based drop down options.

As usual, as everyone does – I started searching in Google for some cool, simple and easy to use search form with multiple types of search box to customize for my site. There are many scripts available on net but couldn’t get one which are up to my expectations and my site requirements.

Multi Search Form with custom Drop Down
Multi Search Form with custom Drop Down

These are the things which are in my mind while searching for Multi Search Form with Drop Down Options:

1. Should not be more complicated and should be easy to use
2. Should not have more JavaScript or CSS or HTML Code
3. Should be simple to tweak according to our site requirements
4. Among all, it should look Simple and Clean – yeh GUI and UI matters :)

But some how couldn’t get the right script, so as I love to work on some small snippets which makes a big difference in terms of site performance or look and feel (GUI and UI) etc. I just had some small concept in my mind on how we can easily build Multi Search Form with custom Drop Down form Options with simple CSS, JavaScript and HTML coding.

As you all aware of my recent post – “Build Multi-level Multi-column Multi Menus with pure CSS” which is a simple menu without any JavaScript and works well with all the major browsers including Internet Explorer 6. I just took the above menu concept to build the Custom Drop Down menu for my new Multi Search Box and with a little bit of JavaScript I have build Multi Search Box which looks similar to Firefox Quick Search.

I named it as “Multi Search with custom Drop Down“.

and yeh works well with all the new and major browsers like Internet Explorer, Mozilla Firefox, Opera, Apple Safari and Google Chrome and one more great thing is it works well with Internet Explorer 6 too, as you all aware still we have many IE 6 users, it made me to work for old browser too.

Check the Demo, Download and Explore yourself :) – feel free to enhance the same and let me know if you find any bugs.

demo download

And this gonna be a part of our WittySparks CSS Framework

Finally, don’t forget to spread it :)

Published by Sravan Kumar Kandagatla

Sravan is the Founder of WittySparks, a global content publishing platform that offers witty stories and information across multiple industry domains. Under his leadership, WittySparks today has become a go-to destination for in-depth knowledge of healthcare, business, and marketing topics. Besides, Sravan is a highly experienced web designer, developer, and user experience designer. You can connect with him on Twitter or LinkedIn and initiate a chat.

Join the Conversation


  1. This is fantastic! Two things: 1) the Bing icon doesn’t show up because in the code you call it as Bing.gif but in the included files and on your site it is bing.gif (lowercase). Change it to uppercase and it shows up. 2) What would it take to change the magnifying glass icon so that the search would be submitted if the user clicked it?

  2. Hi, I am a Joomla user! How can I implement this widget into my joomla website. I am somewhat of a newbie so please explain it to me in detail! Thanks!!

Leave a comment

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

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

Share via
Send this to a friend