新闻 手机 家电 数码 电脑 财经 大模型 直播

CSS如何美化的搜索框

  • 来源： 阿里西西   2016-04-21/09:24
    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> 

    评论 {{userinfo.comments}}

    查看全部评论
    {{money}}元

    {{question.question}}

    A {{question.A}}
    B {{question.B}}
    C {{question.C}}
    D {{question.D}}
    提交

    海信家电”换帅 “ 高玉玲接替代慧忠出任新任董事长
    标签： 海信 2024-11-22
    海信家电”换帅 “ 高玉玲接替代慧忠出任新任董事长

    REDMI K80发布会邀请函出圈：5瓶辣酱背后的暖心故事
    标签： 红米 Redmi 小米 雷军 红米K80 2024-11-22
    REDMI K80发布会邀请函出圈：5瓶辣酱背后的暖心故事

    梅赛德斯-奔驰国内召回A级、E级与AMG GT部分车辆
    标签： 梅赛德斯-奔驰 2024-11-22
    梅赛德斯-奔驰国内召回A级、E级与AMG GT部分车辆

    2024世界互联网大会乌镇峰会闭幕：中国已成全球最大互联网市场
    标签： 世界互联网大会 6G 2024-11-22
    2024世界互联网大会乌镇峰会闭幕：中国已成全球最大互联网市场

    十月份国内智能门锁市场首次实现单月突破百万套销量
    标签： 智能门锁 2024-11-22
    十月份国内智能门锁市场首次实现单月突破百万套销量

    驱动号 更多

    联系电话：010-62681584

    电子邮箱：sw@qudong.com

    地址：北京市海淀区学院路30号

    驱动中国官方微信

    驱动中国官方微信

    ©驱动中国 Qudong.com  All Rights Reserved 版权所有 复制必究 京ICP备11013097号广播电视节目许可证：（京）字第07618号