分享8款纯CSS3实现的搜索框功能


Posted in HTML / CSS onSeptember 14, 2017

效果图:

分享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;  
            padding-right:46px;  
        }  
        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>

总结

以上所述是小编给大家介绍的 分享8款纯CSS3实现的搜索框功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

HTML / CSS 相关文章推荐
利用CSS3实现平移动画效果示例代码
Oct 12 HTML / CSS
HTML5边玩边学(3)像素和颜色
Sep 21 HTML / CSS
HTML5自定义data-* data(obj)属性和jquery的data()方法的使用
Dec 13 HTML / CSS
使用javascript和HTML5 Canvas画的四渐变色播放按钮效果
Apr 10 HTML / CSS
HTML5通过调用canvas对象的getContext()方法来获取绘图环境
Jun 23 HTML / CSS
简单整理HTML5的基本特性和语法
Feb 18 HTML / CSS
h5移动端调用支付宝、微信支付的实现
Jun 08 HTML / CSS
AmazeUI 等分网格的实现示例
Aug 25 HTML / CSS
CSS实现fullpage.js全屏滚动效果的示例代码
Mar 24 HTML / CSS
CSS3实现模糊背景的三种效果示例
Mar 30 HTML / CSS
CSS控制继承中的height能变为可继承吗
Jun 10 HTML / CSS
css之clearfix的用法深入理解(必看篇)
May 21 HTML / CSS
详解CSS3 用border写 空心三角箭头 (两种写法)
Sep 29 #HTML / CSS
详解使用CSS3的@media来编写响应式的页面
Nov 01 #HTML / CSS
CSS3轻松实现圆角效果
Nov 09 #HTML / CSS
详解css3自定义滚动条样式写法
Dec 25 #HTML / CSS
简单掌握CSS3将文字描边及填充文字颜色的方法
Mar 07 #HTML / CSS
CSS3中文字镂空、透明值、阴影效果设置示例小结
Mar 07 #HTML / CSS
利用CSS的Sass预处理器(框架)来制作居中效果
Mar 10 #HTML / CSS
You might like
360搜索引擎自动收录php改写方案
2018/04/28 PHP
Jquery拖拽并简单保存的实现代码
2010/11/28 Javascript
js调用打印机打印网页字体总是缩小一号的解决方法
2014/01/24 Javascript
Jquery遍历checkbox获取选中项value值的方法
2014/02/13 Javascript
JavaScript实现N皇后问题算法谜题解答
2014/12/29 Javascript
JS与jQuery遍历Table所有单元格内容的方法
2015/12/07 Javascript
javascript产生随机数方法汇总
2016/01/25 Javascript
javascript原生ajax写法分享
2016/04/10 Javascript
基于AngularJS前端云组件最佳实践
2016/10/20 Javascript
EasyUi 打开对话框后控件赋值及赋值后不显示的问题解决办法
2017/01/19 Javascript
Vue 兄弟组件通信的方法(不使用Vuex)
2017/10/26 Javascript
vue实现文章内容过长点击阅读全文功能的实例
2017/12/28 Javascript
详解Typescript 内置的模块导入兼容方式
2020/05/31 Javascript
[03:58]2014DOTA2国际邀请赛 龙宝赛后解密DK获胜之道
2014/07/14 DOTA
在Django的URLconf中使用多个视图前缀的方法
2015/07/18 Python
python中matplotlib的颜色及线条控制的示例
2018/03/16 Python
Python自定义一个类实现字典dict功能的方法
2019/01/19 Python
python OpenCV GrabCut使用实例解析
2019/11/11 Python
python实现一个猜拳游戏
2020/04/05 Python
如何基于python实现年会抽奖工具
2020/10/20 Python
python 实现图片批量压缩的示例
2020/12/18 Python
专注澳大利亚特产和新西兰特产的澳洲中文网:0061澳洲制造
2019/03/24 全球购物
应届大学生自荐信格式
2013/09/21 职场文书
培训演讲稿范文
2014/01/12 职场文书
《彩色世界》教学反思
2014/04/12 职场文书
林肯就职演讲稿
2014/05/19 职场文书
纪检干部对照检查材料
2014/08/22 职场文书
家庭贫困证明
2014/09/23 职场文书
英文感谢信格式
2015/01/21 职场文书
经理岗位职责
2015/02/02 职场文书
初级职称评定工作总结
2015/08/13 职场文书
关于销售人员的年终工作总结要点
2019/08/15 职场文书
个人职业生涯规划之自我评估篇
2019/09/03 职场文书
PyTorch dropout设置训练和测试模式的实现
2021/05/27 Python
python代码实现扫码关注公众号登录的实战
2021/11/01 Python
python中的getter与setter你了解吗
2022/03/24 Python