Tabbed search bar using CSS and Javascript

css

#search-bar{padding:10px; background:#90b557; clear:both;}
#search-bar .search-style{ color:#999999; border:solid 1px #CCCCCC; padding:4px;}
ul.search-options, ul.search-options li{ padding:0; border:0; margin:0; list-style:none;}
ul.search-options{clear:both;}
ul.search-options li a{float:left; margin-right:1px; width:auto; background:#b2d281; padding:8px; color:#3b5d14; text-decoration:none; }
.selected a{background:#90b557; color:#FFFFFF;}
ul.search-options li.selected a{background:#90b557; color:#FFFFFF;}

div#sBar { list-style-type: none; text-align: center; margin: 0px; padding: 0px; height: 29px; margin-bottom: 10px; width: 728px; background-color: #fff; border: 1px solid #dfdfdf; position: static; left : 0; }

div#sBar li { list-style-type: none; margin: 0px; padding: 0; float: left; width: auto; background: none; }

#sBar div.sBarInside { list-style-type: none; margin: 0px; padding: 0; float: left; }

#sBar div.sBarInside img { float: left; border: 0px;}

#sBar div.sBarInside strong span.checkItOut { color:#0000ff; font-size: 15px; font-family: arial, helvetica; text-decoration: underline; font-weight: bold; }

#sBar div.sBarInside strong { float: left; margin: 6px 0px 0px 5px; font-size: 15px; font-family: arial, helvetica; cursor: hand; }

#sBar div.trial { padding: 0px; margin: 0px; float: none;}

#sBar div.trial img { float: right;}

HTML

<ul class="search-options">
<li class="selected" id="tab1"><a onclick="javascript:setSearchOptions(1);" href="#">Web</a></li>
<li id="tab2"><a onclick="javascript:setSearchOptions(2);" href="#">Images</a></li>
<li id="tab3" class=""><a onclick="javascript:setSearchOptions(3);" href="#">Videos</a></li>
</ul>

<div id="search-bar">
<form action="" method="post" name="form1" id="form1">
<input type="text" size="40" id="searchq" class="search-style" name="">
<input type="hidden" id="searchopt" name="searchopt" value="2">
</form>
</div>

JavaScript

function setSearchOptions(idElement){
 /* Total Tabs above the input field (in this case there are 3 tabs: web, images, videos) */
 tot_tab = 3;
 tab  = document.getElementById('tab'+idElement);
 search_option = document.getElementById('searchopt');
 for(i=1; i<=3; i++){
  if(i==idElement){
   tab.setAttribute("class","selected");
   search_option.value=idElement;
  } else {
   document.getElementById('tab'+i).setAttribute("class","");
  }
 }
}

Example

Click to DEMO