CSS如何美化的搜索框

文字页标题下banner
资讯 驱动中国 朱 朱丹丹 334次阅读
分享 微 Q 信
  1. <html xmlns="http://www.w3.org/1999/xhtml"> 
  2. <head> 
  3. <title>CSS美化的漂亮搜索框 - www.cxybl.com</title> 
  4. <meta http-equiv="content-type" content="text/html;charset=gb2312"> 
  5. <style type="text/css"> 
  6. <!-- 
  7. .search{ 
  8. padding-right:10px; 
  9. padding-left:10px; 
  10. padding-top:5px; 
  11. padding-bottom:5px; 
  12. width: 280px; 
  13. background:#1A93CC; 
  14. float:left; 
  15. position:relative; 
  16. } 
  17. .search .input{ 
  18. padding-top:2px; 
  19. height:16px; 
  20. width: 180px; 
  21. border: 1px solid #0086C6; 
  22. font-size:14px; 
  23. background:#fff url(search_btn.gif) no-repeat right 0; 
  24. } 
  25. .label{ 
  26. color:#ccc; 
  27. position:absolute; 
  28. left:12px;top:6px; 
  29. display:block; 
  30. height:22px; 
  31. line-height:22px; 
  32. font-size:12px; 
  33. } 
  34. span.submit{ 
  35. cursor:pointer; 
  36. position:absolute; 
  37. left:171px; 
  38. top:6px; 
  39. width:20px; 
  40. height:20px; 
  41. text-indent:-999em; 
  42. } 
  43. --> 
  44. </style> 
  45. </head> 
  46. <body> 
  47. <div class="search"> 
  48. <form action="" method="post" name="search" id="search"> 
  49. <input name="keyword" type="text" class="input" id="keyword" value="" style="float:left;"> 
  50. <label for="keyword" id="for-keyword" class="label">我要搜索</label> 
  51. <span class="submit" onclick="return formSubmit('frmsearch');">搜索</span> 
  52. </form> 
  53. </div> 
  54. <script type="text/javascript"> 
  55. var $ = function(id){return document.getElementById(id);} 
  56. var formSubmit = function(id){ 
  57. document.forms[id].submit(); 
  58. return false; 
  59. } 
  60. var tip = function(q, for_q){ 
  61. q = $(q); 
  62. for_q = $(for_q); 
  63. q.onfocus = function(){ 
  64. for_q.style.display = 'none'; 
  65. q.style.backgroundPosition = "right -17px"; 
  66. } 
  67. q.onblur = function(){ 
  68. if(!this.value) for_q.style.display = 'block'; 
  69. q.style.backgroundPosition = "right 0"; 
  70. } 
  71. for_q.onclick = function(){ 
  72. this.style.display = 'none'; 
  73. q.focus(); 
  74. } 
  75. }; 
  76. tip('keyword','for-keyword'); 
  77. </script> 
  78. </body> 
  79. </html> 
CSS如何 美化的搜索框
版权声明:本文由驱动中国整理发布,转载需注明出处与原文链接。如有疑问请联系 editor@qudong.com。
本文价值 ★★★★★ — 成为第一个评分的人
登录后为本文打分
网友评论0 条评论
正在回复 的评论取消
评论加载中…
🔐

登录后参与互动

评论、点赞均可赚积分
连续签到、邀请好友也有奖励 🎁

电脑端: 微信扫码登录 微信内: 一键登录

微信扫一扫

打开微信「扫一扫」,分享本文到朋友圈或好友

分享卡已生成

长按下方图片保存,转发到朋友圈或微信群

分享卡