Full version: jsB@nk » CSS » Horizontal menu » Simple CSS Tabbed search bar
URL: https://www.javascriptbank.com/simple-css-tabbed-search-bar.html
This is the demo of Tabbed search bar using CSS and JavaScript. Only with few code lines, and you will get a simple tabbed search bar on the your webpage.
Full version: jsB@nk » CSS » Horizontal menu » Simple CSS Tabbed search bar
URL: https://www.javascriptbank.com/simple-css-tabbed-search-bar.html
<style type="text/css">body {font-family:"Lucida Sans Unicode", "Lucida Grande", Verdana, Arial, Helvetica, sans-serif; font-size:12px; color:#555555;}#main{width:600px; margin:0 auto; margin-top:60px;}a{color:#0066CC;}h1{color:#000000;}form, input, h1, p{padding:0; margin:0; border:0;}p{padding:6px 0 20px 0;}#search-bar{padding:10px; background:#90b557; clear:both;}#search-bar .search-style{font-size:16px; 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; font-weight:bold;}.selected a{background:#90b557; color:#FFFFFF;}ul.search-options li.selected a{background:#90b557; color:#FFFFFF;}</style><style type="text/css"> 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;}</style><script language="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","");}}}</script><ul class="search-options"> <li id="tab1" class=""><a href="javascript:void;" onclick="javascript:setSearchOptions(1);">Web</a></li> <li class="selected" id="tab2"><a href="javascript:void;" onclick="javascript:setSearchOptions(2);">Images</a></li> <li class="" id="tab3"><a href="javascript:void;" onclick="javascript:setSearchOptions(3);">Videos</a></li></ul><div id="search-bar"><form id="form1" name="form1" method="post" action=""><input name="" class="search-style" id="searchq" size="40" type="text"><input value="2" name="searchopt" id="searchopt" type="hidden"></form></div>