【CSS3】8款好看的纯CSS3搜索框：
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>8款纯CSS3搜索框</title>
<link href="http://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<style>
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
background: #494A5F;
font-weight: 500;
font-family: "Microsoft YaHei","宋体","Segoe UI", "Lucida Grande", Helvetica, Arial,sans-serif, FreeSans, Arimo;
}
#container {
width: 500px;
height: 820px;
margin: 0 auto;
}
div.search {padding: 30px 0;}
form {
position: relative;
width: 300px;
margin: 0 auto;
}
input, button {
border: none;
outline: none;
}
input {
width: 100%;
height: 42px;
padding-left: 13px;
}
button {
height: 42px;
width: 42px;
cursor: pointer;
position: absolute;
}
/*搜索框1*/
.bar1 {background: #A3D0C3;}
.bar1 input {
border: 2px solid #7BA7AB;
border-radius: 5px;
background: #F9F0DA;
color: #9E9C9C;
}
.bar1 button {
top: 0;
right: 0;
background: #7BA7AB;
border-radius: 0 5px 5px 0;
}
.bar1 button:before {
content: "\f002";
font-family: FontAwesome;
font-size: 16px;
color: #F9F0DA;
}
/*搜索框2*/
.bar2 {background: #DABB52;}
.bar2 input, .bar2 button {
border-radius: 3px;
}
.bar2 input {
background: #F9F0DA;
}
.bar2 button {
height: 26px;
width: 26px;
top: 8px;
right: 8px;
background: #F15B42;
}
.bar2 button:before {
content: "\f105";
font-family: FontAwesome;
color: #F9F0DA;
font-size: 20px;
font-weight: bold;
}
/*搜索框3*/
.bar3 {background: #F9F0DA;}
.bar3 form {background: #A3D0C3;}
.bar3 input, .bar3 button {
background: transparent;
}
.bar3 button {
top: 0;
right: 0;
}
.bar3 button:before {
content: "\f002";
font-family: FontAwesome;
font-size: 16px;
color: #F9F0DA;
}
/*搜索框4*/
.bar4 {background: #F15B42;}
.bar4 form {
background: #F9F0DA;
border-bottom: 2px solid #BE290E;
}
.bar4 input, .bar4 button {
background: transparent;
}
.bar4 button {
top: 0;
right: 0;
}
.bar4 button:before {
content: "\f178";
font-family: FontAwesome;
font-size: 20px;
color: #be290e;
}
/*搜索框5*/
.bar5 {background: #683B4D;}
.bar5 input, .bar5 button {
background: transparent;
}
.bar5 input {
border: 2px solid #F9F0DA;
}
.bar5 button {
top: 0;
right: 0;
}
.bar5 button:before {
content: "\f002";
font-family: FontAwesome;
font-size: 16px;
color: #F9F0DA;
}
.bar5 input:focus {
border-color: #311c24
}
/*搜索框6*/
.bar6 {background: #F9F0DA;}
.bar6 input {
border: 2px solid #c5464a;
border-radius: 5px;
background: transparent;
top: 0;
right: 0;
}
.bar6 button {
background: #c5464a;
border-radius: 0 5px 5px 0;
width: 60px;
top: 0;
right: 0;
}
.bar6 button:before {
content: "搜索";
font-size: 13px;
color: #F9F0DA;
}
/*搜索框7*/
.bar7 {background: #7BA7AB;}
.bar7 form {
height: 42px;
}
.bar7 input {
width: 250px;
border-radius: 42px;
border: 2px solid #324B4E;
background: #F9F0DA;
transition: .3s linear;
float: right;
}
.bar7 input:focus {
width: 300px;
}
.bar7 button {
background: none;
top: -2px;
right: 0;
}
.bar7 button:before{
content: "\f002";
font-family: FontAwesome;
color: #324b4e;
}
/*搜索框8*/
.bar8 {background: #B46381;}
.bar8 form {
height: 42px;
}
.bar8 input {
width: 0;
padding: 0 42px 0 15px;
border-bottom: 2px solid transparent;
background: transparent;
transition: .3s linear;
position: absolute;
top: 0;
right: 0;
z-index: 2;
}
.bar8 input:focus {
width: 300px;
z-index: 1;
border-bottom: 2px solid #F9F0DA;
}
.bar8 button {
background: #683B4D;
top: 0;
right: 0;
}
.bar8 button:before {
content: "\f002";
font-family: FontAwesome;
font-size: 16px;
color: #F9F0DA;
}
</style>
</head>
<body>
<div id="container">
<div class="search bar1">
<form>
<input type="text" placeholder="请输入您要搜索的内容...">
<button type="submit"></button>
</form>
</div>
<div class="search bar2">
<form>
<input type="text" placeholder="请输入您要搜索的内容...">
<button type="submit"></button>
</form>
</div>
<div class="search bar3">
<form>
<input type="text" placeholder="请输入您要搜索的内容...">
<button type="submit"></button>
</form>
</div>
<div class="search bar4">
<form>
<input type="text" placeholder="请输入您要搜索的内容...">
<button type="submit"></button>
</form>
</div>
<div class="search bar5">
<form>
<input type="text" placeholder="请输入您要搜索的内容...">
<button type="submit"></button>
</form>
</div>
<div class="search bar6">
<form>
<input type="text" placeholder="请输入您要搜索的内容...">
<button type="submit"></button>
</form>
</div>
<div class="search bar7">
<form>
<input type="text" placeholder="请输入您要搜索的内容...">
<button type="submit"></button>
</form>
</div>
<div class="search bar8">
<form>
<input type="text" placeholder="请输入您要搜索的内容...">
<button type="submit"></button>
</form>
</div>
</div>
</body>
</html>
```
- 前端开发概要
- Vue
- Vue.js
- Vue的模板
- Vue的属性绑定和双向数据绑定
- Vue的计算属性和侦听器
- v-show和v-if
- Vue简单to do list
- Vue简单to do list组件拆分
- Vue简单to do list组件和实例
- Vue简单to do list的删除功能
- Vue的点击事件，侧重操作数据
- vue中定时器设置和关闭页面时关闭定时器
- axios
- Vue Element-ui
- HTML转Vue
- Vue3
- Vue开发简易权限认证
- demo
- Vue常用命令
- Vue项目1
- 前端面试
- 算法题
- Vue框架原理
- 前端基础
- 安全
- 模拟面试一面
- JavaScript和MySQL
- JavaScript和Redis
- HTML+CSS入门到案例
- 无限级导航栏案例开发
- iframe嵌套网页全屏显示
- CSS定位显示图片不同部分
- Select option 跳转
- 网页显示JavaScript
- 简单文本编辑器
- 用纯js实现一个文本编辑器
- 视频，音频
- frame包住目标网站
- Web重定向
- HCJ
- HTML
- CSS
- jQuery
- Bootstrap
- CSS实例
- 【CSS3】8款好看的纯CSS3搜索框
- 小工具
- menu_icon
- JavaScript
- JS获取屏幕尺寸
- JavaScript简易录播图
- 预设select option的值
- HTML和CSS基础
- APP开发
- uni-app
- nw.js
- CSS基础
- CSS hover 菜单
- CSS Menu
- CSS Menu 2
- Bootsrtap
- 图片展示
- 固定topbar
- JavaScript
- 当前页select option value跳转页面
- JavaScript点击一级菜单打开和关闭二级菜单
- JavaScript json无限分级导航菜单
- JavaScript獲取url
- 其他
- JS获取复选框中当前选中的值
- JS array 遍歷
- JavaScript無刷新修改url
- localStorage
- js版的in_array的实现方法
- JavaScript修改URL參數
- JSON
- jQuery教程
- 用PHP+MySQL+jQuery+Ajax拖放排序修改数据库
- jQuery实例
- jQuery
- jQuery实例1
- jQuery slider实例
- jQuery加载更多功能
- jQuery前后元素移动
- datatables前端搜索功能
- jQuery select value跳转页面
- jQuery局部刷新
- jQuery点击自身以外关闭弹出窗
- 点击增加class
- 点击增加和删除class
- 固定向右menu
- jQuery多級menu
- 用Jquery和Json实现多语言切换
- jQuery to do list
- jQuery slideToggle
- jQuery点击显示和隐藏CSS
- js如何获取点击标签里的值
- JavaScript和JQuery获取DIV的值
- jQuery加载公用文件
- createElement添加内容
- createElement添加内容 - 复制案例
- jQuery 遍历案例
- HBuilder
- 案例
- Slider
- html5 video
- Ajax
- Ajax案例1： 无优化XMLHttpRequest
- Ajax案例2： json的XMLHttpRequest
- Ajax案例3： jQuery json的XMLHttpRequest
- Ajax案例4： H5 jQuery的XMLHttpRequest
- Ajax案例5：无跳转刷新容器获取外部内容
- Ajax搜索
- 两种Ajax获取数据方式
- Cookie
- 微信小程序
- 基础的GET和POST页面
- Node.js
- AngularJS
- AngularJS案例
- AngularJS案例1
- ReactJS
- React native
- API
- Postman API
- Web前端常用图标
- Photoshop
- 前端cnd
- 前端工具
- 前端模板
- Export data
- 前端工程化
- 固定菜單
- 404頁面
- test
- JavaScript框架
- 瀏覽器兼容性