CSS美化的漂亮搜索框
2012-02-28 16:19
501 查看
效果如下图所示:
![](http://hi.csdn.net/attachment/201202/28/0_1330417304Echx.gif)
![](http://hi.csdn.net/attachment/201202/28/0_1330417304Echx.gif)
<!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> <title>CSS美化的漂亮搜索框</title> <meta http-equiv="content-type" content="text/html;charset=gb2312"> <style type="text/css"> <!-- .search{ padding-right:10px; padding-left:10px; padding-top:5px; padding-bottom:5px; width: 280px; background:#1A93CC; float:left; position:relative; } .search .input{ padding-top:2px; height:16px; width: 180px; border: 1px solid #0086C6; font-size:14px; background:#fff url(http://www.poluoluo.com/jzxy/UploadFiles_333/201107/20110726111401700.gif) no-repeat right 0; } .label{ color:#ccc; position:absolute; left:12px;top:6px; display:block; height:22px; line-height:22px; font-size:12px; } span.submit{ cursor:pointer; position:absolute; left:171px; top:6px; width:20px; height:20px; text-indent:-999em; } --> </style> </head> <body> <div class="search"> <form action="" method="post" name="search" id="search"> <input name="keyword" type="text" class="input" id="keyword" value="" style="float:left;"> <label for="keyword" id="for-keyword" class="label">我要搜索</label> <span class="submit" onclick="return formSubmit('frmsearch');">搜索</span> </form> </div> <script type="text/javascript"> var $ = function(id){return document.getElementById(id);} var formSubmit = function(id){ document.forms[id].submit(); return false; } var tip = function(q, for_q){ q = $(q); for_q = $(for_q); q.onfocus = function(){ for_q.style.display = 'none'; q.style.backgroundPosition = "right -17px"; } q.onblur = function(){ if(!this.value) for_q.style.display = 'block'; q.style.backgroundPosition = "right 0"; } for_q.onclick = function(){ this.style.display = 'none'; q.focus(); } }; tip('keyword','for-keyword'); </script> </body> </html>
相关文章推荐
- CSS 漂亮搜索框美化代码
- CSS美化的漂亮搜索框(二)
- CSS 漂亮搜索框美化代码
- JS+CSS美化的漂亮Select列表框
- 美化的漂亮搜索框
- css 教学实例 漂亮的搜索框
- JS+CSS美化的漂亮Select列表框
- CSS使用图片美化的漂亮菜单效果
- 使用CSS美化你的搜索框,让用户喜欢搜索
- CSS漂亮搜索框代码
- 【特效】单选按钮和复选框的美化(只用css)
- CSS自制漂亮按钮
- 关于单选框以及复选框的css美化方法
- html bottom html submit按钮表单控件与CSS美化
- 美观的CSS搜索框,点击后提示消失
- CSS标签切换代码实例教程 比较漂亮
- css漂亮表格样式
- 纯CSS美化单复选框(checkbox、radio)
- bluePen – 使用在线 CSS 编辑器美化你的网站