Phiên bản đầy đủ: jsB@nk » CSS » Trình đơn ngang » Khung tìm kiếm đơn giản dạng thẻ với CSS
URL: https://www.javascriptbank.com/simple-css-tabbed-search-bar.html
Đây là ví dụ mẫu của bài viết Tạo khung tìm kiếm dạng thẻ với CSS và JavaScript. Chỉ với một vài dòng mã lệnh, bạn sẽ tạo được một khung tìm kiếm dạng thẻ đơn giản trên website của mình.
Phiên bản đầy đủ: jsB@nk » CSS » Trình đơn ngang » Khung tìm kiếm đơn giản dạng thẻ với CSS
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>