好看css搜索框样式_分享8款纯CSS搜索框
最简单实用的CSS3搜索框样式，纯CSS效果无需任何javascript，其中部分搜索框在点击的时候有动画特效，搜索框的应用也是比较普通的，效果如下：
设计网站大全https://www.wode007.com/favorites/sjdh
代码如下：
<!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: ;
padding: ;
background: #494A5F;
font-weight: ;
font-family: "Microsoft YaHei","宋体","Segoe UI", "Lucida Grande", Helvetica, Arial,sans-serif, FreeSans, Arimo;
} #container {
width: 500px;
height: 820px;
margin: auto;
}
div.search {padding: 30px ;} form {
position: relative;
width: 300px;
margin: auto;
} input, button {
border: none;
outline: none;
} input {
width: %;
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: ;
right: ;
background: #7BA7AB;
border-radius: 5px 5px ;
}
.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: ;
right: ;
}
.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: ;
right: ;
}
.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: ;
right: ;
}
.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: ;
right: ;
}
.bar6 button {
background: #c5464a;
border-radius: 5px 5px ;
width: 60px;
top: ;
right: ;
}
.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: ;
}
.bar7 button:before{
content: "\f002";
font-family: FontAwesome;
color: #324b4e;
} /*搜索框8*/
.bar8 {background: #B46381;}
.bar8 form {
height: 42px;
}
.bar8 input {
width: ;
padding: 42px 15px;
border-bottom: 2px solid transparent;
background: transparent;
transition: .3s linear;
position: absolute;
top: ;
right: ;
z-index: ;
}
.bar8 input:focus {
width: 300px;
z-index: ;
border-bottom: 2px solid #F9F0DA;
}
.bar8 button {
background: #683B4D;
top: ;
right: ;
}
.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>
好看css搜索框样式_分享8款纯CSS搜索框的更多相关文章
- 一款纯css实现的垂直时间线效果
今天给大家分享一款纯css实现的垂直时间线效果.垂直时间线适合放在类似任务时间安排的网页上.该实现采用了蓝色作为主题色,界面效果还不错.一起看下效果图: 实现的代码. html代码: ... 阅读原文 ...
- 一款纯css实现的漂亮导航
今天给大家分享一款纯css实现的漂亮导航.之前为大家分享过jquery实现的个人中心导航菜单,今天这款也是适合放在个人中心.还带来图标,效果不错.一起看下效果图: 在线预览 源码下载 实现的代码. ...
- 分享11个纯css完成的图片浏览器
图片画廊用于在网站上显示系列图片,它已成为网站重要的组成部分.实现图片画廊有很多种方法,今天要与大家分享的是11个使用纯 CSS 实现的图片画廊,它们代码少,效果炫,加载速度快,希望能对大家有所帮助. ...
- css重设样式_清除浏览器的默认样式
由于不同的浏览器默认的样式也不同,所以在网页开发前设置一个公用样式,来清除各个浏览器的默认样式,已达到做的网页在各个浏览器中达到统一. 收集的默认样式的链接地址: 1.eric-meyer-reset ...
- css通配样式初始化（多款，供君自选）
腾讯官网 body,ol,ul,h1,h2,h3,h4,h5,h6,p,th,td,dl,dd,form,fieldset,legend,input,textarea,select{margin:0; ...
- vue@cli3 public目录下的静态图片，如何使用在css类文件中（sass可行，纯css不行）
之前写了一篇vue文件怎么使用的文章,有人问我怎么在css文件中使用public下的文件,这是个好问题,因为我之前都没有研究过 需要解决的2个问题 一开始按照vue文件的使用方式(https://ww ...
- web前端篇：CSS使用，样式表特征，选择器
目录 web前端篇:CSS使用,样式表特征,选择器 1.CSS介绍 2.CSS使用 3.样式表特征 4.CSS选择器 5.选择器的优先级 6.练习题: web前端篇:CSS使用,样式表特征,选择器 1 ...
- web中用纯CSS实现筛选菜单
web中用纯CSS实现筛选菜单 本文我们来用纯css实现像淘宝宝贝筛选菜单那样的效果,例子虽然没有淘宝那样强大,不过原理差不多,如果花点心思也可以实现和淘宝一样的. 内容过滤是一个在Web上常见的一个 ...
- 如何使用纯 CSS 制作四子连珠游戏
序言:你是否想过单纯使用 CSS 也可以制作一款游戏?甚至可以双人对决!这是一篇非常有趣的文章,作者详细讲解了使用纯 CSS 制作四子连珠游戏的思路以及使用奇淫巧技解决困难问题的方法.因为案例本身比较 ...
随机推荐
- java中PipedStream管道流通信详细使用（详解）
多线程使用PipedStream 通讯 Java 提供了四个相关的管道流,我们可以使用其在多线程进行数据传递,其分别是 类名 作用 备注 PipedInputStream 字节管道输入流 字节流 Pi ...
- EasyARM-iMX257 linux两年前的笔记
我依然清晰的记得刚拿到Imx283 257的情景,兴奋中充满忧虑,对操作系统的概念只知一二,不知三四!!周立功出品的资料我一直觉得是比较精品的,同样这款iMX283配套的文档资料(v1.04)也是比较 ...
- k8s学习-集群安装
3.kubernetes安装 3.1.规划 hostname ip 内存 核 硬 说明 harbor 192.168.136.30 2G 2 100G 私有仓库 koolshare 2G 2 20G ...
- Vue-websocket使用
Vue中使用websocket 1.介绍:websocket是一个双向通行工具,解决了原来的http单向通信的弊端,可以让服务器主动向客户端推送数据 // 安装客户端的socket npm i soc ...
- RocketMQ系列（五）广播与延迟消息
今天要给大家介绍RocketMQ中的两个功能,一个是"广播",这个功能是比较基础的,几乎所有的mq产品都是支持这个功能的:另外一个是"延迟消费",这个应该算是R ...
- Ultra-QuickSort (求逆序数+离散化处理)、Cows、Stars【树状数组】
一.Ultra-QuickSort(树状数组求逆序数) 题目链接(点击) Ultra-QuickSort Time Limit: 7000MS Memory Limit: 65536K Total ...
- SQL Beautifier & SQL2014自带的格式化工具
格式化工具(希望有几款集成在IDE中的格式化工具)为什么要说明这些,不是为说明这个工具而发,看到那几千行或集成在一起的存储过程觉得乱七八的不爽,后面将会强力训练下自己. --下面这款SQL Beaut ...
- delphi 控件查询
//老古董,以前这些东西太多了,收藏的没过来,只好粘贴至此,当然不是本人整理的. delphi 控件查询:http://www.torry.net/ http://www.jrsoftware.org ...
- matlab-整数规划(非线性规划之蒙特卡洛法（随机取样法）)
首先编写M 文件mengte.m 定义目标函数f 和约束向量函数g,程序如下:function [f,g]=mengte(x);%定义目标函数f和约束向量函数g f=x()^+x()^+*x()^+* ...
- mingw32 exception在sjlj与dwarf差别-反汇编分析
sjlj (setjump/longjump)与dwarf-2为mingw32两种异常处理模型的实现.sjlj有着开销,而随linux发行的mingw32开发库包都是用sjlj版编译的,而Qt却采用d ...