css模仿select下拉列表

时间：2022-07-02 15:42:29 编辑：袖梨来源：一聚教程网

提示：您可以先修改部分代码再运行

/*basic*/
*{padding:0;margin:0;color:#000;font:12px/20px Arial,Sans-serif,"宋体";}
/*elements*/
.clear{clear:both;overflow:hidden;}
ul,li,ol{list-style-type:none;list-style-position:outside;}
button,.btnNormal{line-padding:0 9px!important;padding:0 5px;}
a{color:#0042ff;text-decoration:underline;}
a,a *{cursor:pointer;}
a img{border:0;}
.searchTool{float:left;}
.searchTool .searchExtend{float:left;line-_padding-top:5px;}
.searchTool .radio{vertical-align:middle;margin-left:10px;margin-right:2px;*margin-right:0;}
.searchTool .txtSearch{float:left;padding:2px 2px 0 2px;line-vertical-align:bottom;border:1px solid #3e99d4;}
.searchTool .selSearch{float:left;background:#fff;line-border:1px solid #3e99d4;border-left:0;}
.searchTool .nowSearch{float:left;line-overflow:hidden;padding-left:4px;}
.searchTool .btnSel{float:right;border-left:1px solid #3e99d4;}
.searchTool .btnSel a{background:url(http://static.youku.com/v1.0.0217/index/img/btn_sel.gif) no-repeat center center;display:block;}
.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;}
.searchTool .selOption{z-index:9999;position:absolute;margin-left:-1px;background:#fff;border:1px solid #3e99d4;}
.searchTool .selOption a{display:block;padding-left:5px;line-color:#000;text-decoration:none;}
.searchTool .selOption a:hover{color:#fff;background:#95d5f1;}
.searchTool .btnSearch{float:left;margin-left:10px;line-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;line-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;line-}
.searchTool .btnSearch .lbl{cursor:pointer;display:block;padding-left:5px;letter-spacing:5px;text-align:center;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></p>
<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>
<div class="searchTool">
<form id="headSearchForm" action="http://so.youku.com/search_playlist" method="get" onsubmit="return dosearch(this);" name="headSearchForm">
    <input class="txtSearch" id="headq" name="q" value="闯关东" type="text" /> <input type="hidden" name="searchdomain" value="http://so.youku.com" /> <input id="headSearchType" type="hidden" name="searchType" value="playlist" />
    <div class="selSearch">
    <div class="nowSearch" id="headSlected" onmouseout="drop_mouseout('head');" onclick="if(document.getElementById('headSel').style.display=='none'){document.getElementById('headSel').style.display='block';}else {document.getElementById('headSel').style.display='none';};return false;">专辑</div>
    <div class="btnSel"> </div>
    <div class="clear"> </div>
    <ul class="selOption" id="headSel" style="display: none">
        <li><a onmouseout="drop_mouseout('head');" onclick="return search_show('head','video',this)" onmouseover="drop_mouseover('head');" href="#">视频</a></li>
        <li><a onmouseout="drop_mouseout('head');" onclick="return search_show('head','playlist',this)" onmouseover="drop_mouseover('head');" href="#">专辑</a></li>
        <li><a onmouseout="drop_mouseout('head');" onclick="return search_show('head','user',this)" onmouseover="drop_mouseover('head');" href="#">会员</a></li>
        <li><a onmouseout="drop_mouseout('head');" onclick="return search_show('head','bar',this)" onmouseover="drop_mouseover('head');" href="#">看吧</a></li>
        <li><a onmouseout="drop_mouseout('head');" onclick="return search_show('head','pk',this)" onmouseover="drop_mouseover('head');" href="#">PK擂台</a></li>
    </ul>
    </div>
    <div class="btnSearch"><a onclick="javascript:return dosearch(document.getElementById('headSearchForm'));" href="#"><span class="lbl">搜索</span></a></div>
    <div class="searchExtend" id="searchExtend" style="display: none" name="searchExtend"><input class="radio" type="radio" onclick="csbt(this,this.form.sbts);" name="sbt" value="post" />搜贴子<input class="radio" type="radio" onclick="csbt(this,this.form.sbts);" name="sbt" value="user" />按作者搜<input type="hidden" name="sbts" value="bar" /></div>
    <div class="clear"> </div>
</form>
</div>
<div class="clear"> </div>
<div> </div>
<div> </div>

提示：您可以先修改部分代码再运行

推荐专题

最新下载

热门教程

css模仿select下拉列表

相关文章

热门栏目

php教程

asp.net教程

手机开发

css教程

网页制作

办公数码

jsp教程