首页 » 网页制作 » css

CSS 创建搜索框

css 2021-12-23

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

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

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

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

<link rel="stylesheet" href="https://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%); }



上一篇:CSS 导航栏图标下一篇:CSS的三大特性(继承、层叠和优先级)
程序园_程序员的世界 Copyright © 2020- www.580doc.com. Some Rights Reserved.