drag and share
  • Twitter
  • Delicious
  • Facebook
  • Digg
  • Reddit
  • Stumbleupon

Tabbed search bar using CSS and Javascript

By: OSH Editorial    In: CSS Forms Javascript Tutorials

Karma - Responsive bootstrapped webapp

Some lines of JavaScript code can help you to add nice effects to improve some features of your websites.

Hello you, if you are new here, you might want to subscribe to our RSS feed for updates on this article and our site.


This tutorial explains how to implement a simple tabbed search bar using CSS and a javascript function which set “active” the selected tab and changes the value of an hidden element to set search options and execute your search only for all items related to the selected topic (for example: web, images, videos…).

See a demo here

Written by: OSH Editorial

No Bio yet...

Share this Story

If you enjoyed reading, consider sharing the love with the rest of the world.



February 10, 2009

This does not work with IE7


September 1, 2009

I am VERY upset that this doesn’t work in IE7+!

The Hunter

September 1, 2009

@Dan -
Well for what i can see it is just an layout bug ;)


September 1, 2009

Will there be a fix for this as I think this will be really helpful for alot of people.


September 1, 2009

Sorry having a thick one – this is from the woork site.

The Hunter

September 1, 2009

@jamie -
I dont know you beter pm the author of this tutorial.

Add Your Comment

Your name

May 21, 2019

We use Gravatars on OpensourceHunter, they are little icons that appear next to your name on this site and on many others. You can get a Gravatar account for free and any other site that supports it will show your avatar too. Get your Gravators account here!