CSS 创建搜索框（ CSS 导航栏图标）

CSS 创建搜索框（ CSS 导航栏图标）

本章节我们将学习如何使用 CSS 创建搜索框。

图标资源用的是 Font Awesome4.7 版本的图标。

Font Awesome 图标教程可以参考：Font Awesome 图标

可以直接引入第三方 CDN 库：

<link rel="stylesheet" href="cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">基础 HTML 代码搜索表单 HTML 代码 <!-- 搜索表单 --><form class="example" action="action_page.php">  <input type="text" placeholder="搜索.." name="search">  <button type="submit"><i class="fa fa-search"></i></button></form>搜索框 CSS 代码实例 * { box-sizing: border-box;} /* 设置搜索框 */form.example input[type=text] { padding: 10px; font-size: 17px; border: 1px solid grey; float: left; width: 80%; background: #f1f1f1;} /* 设置提交按钮 */form.example button { float: left; width: 20%; padding: 10px; background: #2196F3; color: white; font-size: 17px; border: 1px solid grey; border-left: none; /* 防止双边框 */ cursor: pointer;} form.example button:hover { background: #0b7dda;} /* 清除浮动 */form.example::after { content: ""; clear: both; display: table;}尝试一下 »第二个搜索框实例实例 body{ background: #f2f2f2; font-family: 'Open Sans', sans-serif;} .search { width: 100%; position: relative; display: flex;} .searchTerm { width: 100%; border: 3px solid #00B4CC; border-right: none; padding: 5px; height: 20px; border-radius: 5px 0 0 5px; outline: none; color: #9DBFAF;} .searchTerm:focus{ color: #00B4CC;} .searchButton { width: 40px; height: 36px; border: 1px solid #00B4CC; background: #00B4CC; text-align: center; color: #fff; border-radius: 0 5px 5px 0; cursor: pointer; font-size: 20px;} /* 调整大小查看搜索栏的变化*/.wrap{ width: 30%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}尝试一下 »