一个搜索条样式,包括select的美化

一直以来用CSS控制select都没有实现过。还是只能用JS来模拟。

by youku

<!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"><a href="#" 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');"></a></div>

<div class="clear"></div>

<ul class="selOption" id="headSel" style="display:none;">

<li><a href="#" onclick="return search_show('head','video',this)" onmouseover="drop_mouseover('head');" onmouseout="drop_mouseout('head');">视频</a></li>

<li><a href="#" onclick="return search_show('head','playlist',this)" onmouseover="drop_mouseover('head');" onmouseout="drop_mouseout('head');">专辑</a></li>

<li><a href="#" onclick="return search_show('head','user',this)" onmouseover="drop_mouseover('head');" onmouseout="drop_mouseout('head');">会员</a></li>

<li><a href="#" onclick="return search_show('head','bar',this)" onmouseover="drop_mouseover('head');" onmouseout="drop_mouseout('head');">看吧</a></li>

<li><a href="#" onclick="return search_show('head','pk',this)" onmouseover="drop_mouseover('head');" onmouseout="drop_mouseout('head');">PK擂台</a></li>

</ul>

</div>

<div class="btnSearch">

<a href="#" onclick="javascript:return dosearch(document.getElementById('headSearchForm'));"><span class="lbl">搜索</span></a>

</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>

提示:你可以先修改部分代码再运行。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Golang语言社区

转--Golang语言版 ssh口令破解工具

使用说明: ? iplist的格式为ip:port,如111.111.111.111:22 user.txt为用户名字典 password.txt为密码字典 g...

2977
来自专栏BY的专栏

iOS开发技巧:快速实现 圆角+描边

3083
来自专栏Alice

一个layer可以跟着画完的线移动ios程序 好玩啊。

用法:采用的是关键帧实现的。    实验目的:让上层的layer子层能够跟着在另一个子层上花的线进行移动 。即当线画完之后,图形开始移动,并且能够停在最后的那个...

2086
来自专栏码农阿宇

css基础1

Css(实现了页面和样式的彻底分离) 写入样式表的三种方式: 内联样式表,嵌入样式表,外部样式表。 内联样式表的优先级高于嵌入样式表。嵌入式样式表的优先级大于外...

30512
来自专栏游戏杂谈

Flash对象插入到网页中的3px问题

我记得我已经遇到过,不过今天又遇到了,而且浪费了大量的时候在上面,甚至怀疑自己写的脚本有问题,花了几乎一个下午来调试这个问题。最后发现是样式导致的…

1043
来自专栏别先生

Javascript实现计数器,定时警告和停止

1 <html> 2 <head> 3 <meta charset="utf-8"> 4 <title>定时警告</title> 5 </head> ...

2129
来自专栏進无尽的文章

实践 -实现一款中间凸起的TabBar

这是看到一篇文章后感觉很有意思于是就把自己的效果改了改实现了一下,文末有原文链接。

1222
来自专栏wOw的Android小站

[iOS] 列表滑动展开隐藏头部HeaderView

首先看一下BiliBili客户端的视频浏览界面。默认界面Header完全展开,并且Header显示AV号(别乱想,就是视频编号了)以及播放按钮。滑动之后Head...

3362
来自专栏林德熙的博客

Xamarin Forms 进度条控件

本文翻译:http://xamlnative.com/2016/04/14/xamarin-forms-a-simple-circular-progress-c...

1241
来自专栏落影的专栏

直播APP常用动画效果

介绍 记录、总结开发遇到一些问题,大家一起交流学习。 这次带来,对直播APP的常用动画总结。 直播Live 效果展示 下面是一个很多平台都有的入门豪华礼物动...

5208

扫码关注云+社区