漂亮的博客搜索框

看到漂亮的搜索框，收藏...

主要用背景图片和输入框和链接隐藏完成。

可以在IE6+,ff，chorme下兼容...

 

 

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>博客搜索框</title>
<style type="text/css">
/*-----------------------
博客图片搜索框
兼容性：IE6+,ff,chomre
author：tomieric
date:2010-7-30
website:http://cnblogs.com/tomieric
qq微博：http://t.qq.com/tomi-eric
-------------------------*/
#search{ position:relative; width:231px; height:39px; line-height:39px; background:url(search.png)  no-repeat left center;}
#search_text{ height:20px; width:160px; position:absolute; top:8px; left:6px; border:1px solid transparent; color:#aaa}
#search a{ display:block; width:55px; height:26px; text-decoration:none; position:absolute; right:6px; top:6px;text-indent:-1000em/*隐藏链接文字*/}
</style>
<script>
function submit_form(){ //模拟表单提交函数
var keyWords=document.getElementById("search_text").value; //获得搜索框关键字
window.location.href="http://google.com.hk/search?hl=zh-CN&q=tomieric+"+keyWords;  //跳转到搜索页面
return false;
}
</script>
</head>
<body>
<div id="search">
<input type="text" name="text" id="search_text" />
<a href="#" onFocus="this.blur()" onclick="submit_form()">搜索</a>
</div>
</body>
</html>

 

demo:U115

 

posted @ 2010-07-30 14:25  Tomi-Eric's  阅读(1146)  评论(1)  编辑  收藏  举报