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

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}}
    提交

    小米15系列即将亮相，搭载高通新芯片并引入钛金属+卫星通信技术
    标签： 小米15 2024-05-14

    充电革命！理想汽车突破50万家庭充电桩安装，引领行业新风尚
    标签： 理想汽车 充电桩 2024-05-14
    充电革命！理想汽车突破50万家庭充电桩安装，引领行业新风尚

    GPT-4o图像识别功能上线，人工智能交互进入新纪元
    标签： GPT-4o OpenAI 2024-05-14
    GPT-4o图像识别功能上线，人工智能交互进入新纪元

    重新定义Ultra标准，vivo X100系列新品正式发布
    标签： vivo X100 Ultra 2024-05-13

    OpenAI即将发布新功能，GPT4-Lite引擎及语音识别技术引关注
    标签： OpenAI GPT4-Lite 2024-05-13
    OpenAI即将发布新功能，GPT4-Lite引擎及语音识别技术引关注

    驱动号 更多

    联系电话：010-62681584

    电子邮箱：sw@qudong.com

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

    驱动中国官方微信

    驱动中国官方微信

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