javascript和JQuery焦点图和代码特效大全
当前最流行的开源CMS网站系统大全
当前位置:首页 > WEB前端 > CSS-HTML

HTML+CSS实现的漂亮搜索框

来源:IT技术网编辑:秩名发布于:2017-02-11人围观

HTML+CSS实现的漂亮搜索框,谷歌和百度首页的搜索框都是<input>+<button>模式的,bing的搜索框感觉要好点儿。简言之,就是将提交按钮放到<input>中,其实这是做不到的,只能伪装。

  1. <html>
  2.  
  3. <head>
  4. <title>IT技术网|搜索框的实现</title>
  5. <meta charset="UTF-8">
  6. <style type="text/css">
  7. <!--
  8. body {
  9. font-family:'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
  10. font-size:14px;
  11. }
  12.  
  13. h1 {
  14. margin-top:0px;
  15. margin-bottom:8px;
  16. }
  17.  
  18. /* 链接 */
  19. a {
  20. text-decoration:none;
  21. color:#1c00ff;
  22. }
  23.  
  24. a:hover {
  25. color:#5f00e4;
  26. }
  27. fieldset.search {
  28. padding: 0px;
  29. border: none;
  30. width: 232px;
  31. background:#e0e0e0;
  32. }
  33.  
  34. fieldset.search:hover {
  35. background: #a8a8a8;
  36. }
  37. .search input, .search button {
  38. border: none;
  39. float: left;
  40. }
  41. .search input.box {
  42. height: 28px;
  43. width: 200;
  44. margin-right: 0px;
  45. padding-right: 0px;
  46. background: #e0e0e0;
  47. margin: 1px;
  48. }
  49. .search input.box:focus {
  50. background: #e8e8e8 ;
  51. outline: none;
  52. }
  53. .search button.btn {
  54. border: none;
  55. width: 28px;
  56. height: 28px;
  57. margin: 0px auto;
  58. margin: 1px;
  59. background: url(http://sandbox.runjs.cn/uploads/rs/339/livk7pl5/search_blue.png) no-repeat top right;
  60. }
  61. .search button.btn:hover {
  62. background: url(http://sandbox.runjs.cn/uploads/rs/339/livk7pl5/search_black.png) no-repeat bottom right;
  63. }
  64.  
  65. /* 文章样式 */
  66. .article {
  67.  
  68. }
  69. -->
  70. </style>
  71. </head>
  72. <body>
  73. <div>
  74. <h2>搜索框</h2>
  75. <form method="get" id="searchform" action="http://www.173it.cn/">
  76. <fieldset class="search">
  77.  <input type="text" class="box" name="s" id="s" class="inputText" placeholder="IT技术网" x-webkit-speech>
  78.   <button class="btn" title="SEARCH">&nbsp;</button>
  79. </fieldset>
  80. </form>
  81. </div>
  82. <article class="article">
  83. </article>
  84. </body>
  85. </html>

与相关的文章
有时间的话来看看IT界的突发事件