7组漂亮的纯CSS3搜索框

简单实用的CSS3搜索框，纯CSS效果无需任何javascript，其中部分搜索框在点击的时候有动画特效，搜索框的应用也是比较普通的，喜欢的就收下吧。

分类：表单代码 > 搜索框难易：入门级

查看演示下载资源下载积分： 30 积分

关注公众号，免费赠送安装视频教程、环境和学习视频，后面会不断更新。

页面head部分需要引入font-awesome.min.css字体样式和style.css样式，来显示字体图标和输入框等的颜色样式，代码如下：

<link rel="stylesheet" href="css/font-awesome.min.css">
<link rel="stylesheet" href="css/style.css">

页面body部分的结构也是比较简单的，7个搜索框放在一个div容器里面，代码如下：

<div class="search d1">
	  <form>
	  <input type="text" placeholder="搜索从这里开始...">
	  <button type="submit"></button>
	  </form>
	</div>
	<div class="search d2">
	  <form>
	  <input type="text" placeholder="搜索从这里开始...">
	  <button type="submit"></button>
	</form>
	</div>
	<div class="search d3">
	<form>
	  <input type="text" placeholder="搜索从这里开始...">
	  <button type="submit"></button>
	</form>
	</div>
	<div class="search d4">
	<form>
	  <input type="text" placeholder="搜索从这里开始...">
	  <button type="submit"></button>
	</form>
	</div>
	<div class="search d5">
	<form>
	  <input type="text" placeholder="搜索从这里开始...">
	  <button type="submit"></button>
	</form>
	</div>
	<div class="search d6">
	<form>
	  <input type="text" placeholder="搜索从这里开始...">
	  <button type="submit"></button>
	</form>
	</div>
	<div class="search d7">
	<form>
	  <input type="text" placeholder="搜索从这里开始...">
	  <button type="submit"></button>
	</form>
</div>