当前位置：首页 > 脚本 > 特效代码 > 表单按钮 > 一个漂亮的DIV搜索条

一个漂亮的DIV搜索条
日期：2021-09-13 21:39:38 来源：网络收集

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<HTML>
<HEAD>
<TITLE>搜索条</TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<style>
/*basic*/
*{padding:0;margin:0;color:#000;font:12px/20px Arial,Sans-serif,"宋体";}
/*elements*/
.clear{clear:both;height:0px;overflow:hidden;}
ul,li,ol{list-style-type:none;list-style-position:outside;}
button,.btnNormal{height:22px;line-height:18px;padding:0 9px!important;padding:0 5px;}
a{color:#0042ff;text-decoration:underline;}
a,a *{cursor:pointer;}
a img{border:0;}
.searchTool{float:left;width:520px;}
.searchTool .searchExtend{float:left;line-height:24px;_padding-top:5px;}
.searchTool .radio{vertical-align:middle;margin-left:10px;margin-right:2px;*margin-right:0;}
.searchTool .txtSearch{float:left;width:232px;padding:2px 2px 0 2px;height:20px;line-height:20px;vertical-align:bottom;border:1px solid #3e99d4;}
.searchTool .selSearch{float:left;width:60px;background:#fff;height:22px;line-height:22px;border:1px solid #3e99d4;border-left:0;}
.searchTool .nowSearch{float:left;width:40px;height:20px;line-height:22px;overflow:hidden;padding-left:4px;}
.searchTool .btnSel{float:right;border-left:1px solid #3e99d4;width:14px;height:22px;}
.searchTool .btnSel a{background:url(http://static.youku.com/v1.0.0217/index/img/btn_sel.gif) no-repeat center center;display:block;width:14px;height:22px;}
.searchTool .btnSel a:hover{background:url(http://static.youku.com/v1.0.0217/index/img/btn_sel_over.gif) no-repeat center center;border:1px solid #fff;width:12px;height:20px;}
.searchTool .selOption{z-index:9999;position:absolute;margin-left:-1px;width:60px;background:#fff;border:1px solid #3e99d4;}
.searchTool .selOption a{display:block;height:21px;padding-left:5px;line-height:21px;color:#000;text-decoration:none;}
.searchTool .selOption a:hover{color:#fff;background:#95d5f1;}
.searchTool .btnSearch{float:left;margin-left:10px;width:58px;height:22px;line-height:22px;border:1px solid #3e99d4;overflow:hidden;}
.searchTool .btnSearch a{background:url(http://static.youku.com/v1.0.0217/index/img/bg_nav_option.gif) repeat-x center -6px;display:block;text-decoration:none;height:22px;line-height:22px;overflow:hidden;}
.searchTool .btnSearch a:hover{background:url(http://static.youku.com/v1.0.0217/index/img/bg_nav_option_over.gif) repeat-x center center;border:1px solid #fff;height:20px;line-height:20px;}
.searchTool .btnSearch .lbl{cursor:pointer;display:block;width:40px;padding-left:5px;letter-spacing:5px;text-align:center;height:18px;padding-top:1px;margin:0 auto;filter:progid:DXImageTransform.Microsoft.DropShadow(color=#daeefa,offX=1,offY=1,positives=true);}
.searchTool .btnSearch a:hover .lbl{padding-top:0px;}
</style>
<script>
function drop_mouseover(pos){
 try{window.clearTimeout(timer);}catch(e){}
}
function drop_mouseout(pos){
 var posSel=document.getElementById(pos+"Sel").style.display;
 if(posSel=="block"){
  timer = setTimeout("drop_hide('"+pos+"')", 1000);
 }
}
function drop_hide(pos){
 document.getElementById(pos+"Sel").style.display="none";
}
function search_show(pos,searchType,href){
    document.getElementById(pos+"SearchType").value=searchType;
    document.getElementById(pos+"Sel").style.display="none";
    document.getElementById(pos+"Slected").innerHTML=href.innerHTML;
    document.getElementById(pos+'q').focus();
    var sE = document.getElementById("searchExtend");
    if(sE != undefined  &&  searchType == "bar"){
     sE.style.display="block";
    }else if(sE != undefined){
     sE.style.display="none";
    }
 try{window.clearTimeout(timer);}catch(e){}
 return false;
}
</script>
</HEAD>
<BODY>
<div class="searchTool">
<form method="get" action="http://so.youku.com/search_playlist" name="headSearchForm" id="headSearchForm" onsubmit="return dosearch(this);">
     <input class="txtSearch" id="headq" name="q" type="text" value="闯关东" />
     <input name="searchdomain" type="hidden" value="http://so.youku.com">
     <input id="headSearchType" name="searchType" type="hidden" value="playlist">
     <div class="selSearch">
    <div class="nowSearch" id="headSlected" onclick="if(document.getElementById('headSel').style.display=='none'){document.getElementById('headSel').style.display='block';}else {document.getElementById('headSel').style.display='none';};return false;" onmouseout="drop_mouseout('head');">专辑</div>
    <div class="btnSel"></div>
    <div class="clear"></div>
    <ul class="selOption" id="headSel" style="display:none;">
     <li>视频</li>
     <li>专辑</li>
     <li>会员</li>
     <li>看吧</li>
     <li>PK擂台</li>
    </ul>
     </div>
     <div class="btnSearch">
    <span class="lbl">搜索</span>
     </div>
          <div class="searchExtend" id="searchExtend" name="searchExtend" style="display:none">
           <input type="radio" class="radio" name="sbt" value="post" onclick="csbt(this,this.form.sbts);" />搜贴子<input type="radio" name="sbt" value="user" onclick="csbt(this,this.form.sbts);" class="radio" />按作者搜<input type="hidden" name="sbts" value="bar">
     </div>
          <div class="clear"></div>
     </form>
   </div>
   <div class="clear"></div>
  </div>
 </div>
</BODY>
</HTML>

运行代码保存代码提示：您可以先修改部分代码再运行，保存代码功能在Firefox下无效。

JS特效代码 jQuery特效 JS代码表单按钮代码

上一篇：大小写货币转换

下一篇：选择大类，小类变灰

+ 更多脚本 +

广告代码 全部 +: 焦点图; 全屏广告; 对联广告; 在线客服; 相册代码; 菜单导航; TAB标签; 悬浮漂浮; flash特效; 图片特效; 翻牌书角; 其他特效

特效代码 全部 +: 导航菜单; 表单按钮; 文字特效; 表格图层; 图片特效; 时间日期; 滚动代码; 窗口特效; 颜色背景; 网站常用; CSS样式; 其他特效

音效素材网提供各类素材，打造精品素材网站！

音效素材

一个漂亮的DIV搜索条
日期：2021-09-13 21:39:38 来源：网络收集

您可能感兴趣的脚本

一个简洁的JS日历