好看css搜索框样式_分享8款纯CSS搜索框

时间: 2018-04-18阅读: 3119标签: 样式

最简单实用的css3搜索框样式,纯css效果无需任何JavaScript,其中部分搜索框在点击的时候有动画特效,搜索框的应用也是比较普通的,效果如下:


代码如下:

<!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>


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

链接: http://www.fly63.com/article/detial/660

CSS层叠样式表

层叠样式表,用来表现HTML或者XML等文件样式的计算机语言。网页表现与内容分离的样式设计语言,能够对网页中对象排版进行像素级精确控制,几乎支持所有字体字号

css单行截断和多行截断问题

多行截断有好几种方法,可以直接使用float方法,方便自定义样式及监听事件,并且兼容性好,是暂时最完美的解决方案。就是略复杂,不过网上有可以直接拿来用哦~

vue样式加scoped后不能覆盖组件的原有样式解决方法

为了vue页面样式模块化,不对全局造成污染,建议每个页面的style标签加上scoped,表示他的样式只属于当前的页面,父组件的样式不会泄漏到子组件中。但是scoped也会造成一些额外的负担

css常用样式整理_css属性大全

css常用样式有哪些?这篇文章整理如下内容:字体属性(font)、 常用字体 (font-family)、背景属性 (background)、区块属性 (Block)、方框属性 (Box)、边框属性 (Border)、列表属性 (List-style)、定位属性 (Position)、CSS文字属性

使用execCommand将文字样式设置成css样式的办法

我们在使用contenteditable属性做富文本编辑器时经常会用到document.execCommand方法来处理文字的样式。但当我们要设置比如font-size,会发现这个命令只支持(1-7)这几种字体大小值

VUE中CSS样式穿透

在做两款H5的APP项目,前期采用微信官方推荐的weui组件库。后来因呈现的效果不理想,组件不丰富,最终项目完成后全部升级采用了有赞开发的vant组件库。同时将webpack顺利从3升级到4(项目结构 webpack+vue+vuex+vue-router+vant+less)

CSS样式更改_2D转换

这篇文章我们来介绍下CSS样式更改中2D转换的基础用法。内容包括:元素位移translate(左边,顶边)、元素旋转rotate(角度)、元素缩放scale(宽度倍数,高度倍数)、元素翻转给定的角度 skew(x,y)

原生js获取、添加、修改_非行间css样式

在html中样式分为:浏览器默认样式,引用样式(link外部样式文件,stle标签定义样式)、行间样式(及节点style属性定义的样式)。这篇文章主要讲解使用原生js获取、添加非行间css样式。

CSS书写位置

上面我们使用了三种方式为 html 标签添加样式,归结起来就三种:1.元素内部: 行内样式2.文档内部: style标签3.外部样式: link标签;一般工作中都是使用外部样式,其余两种可以在学习测试的时候使用

js中尺寸类样式

都要事件对象的配合,Tip:注意与浏览器及元素尺寸分开,鼠标类尺寸样式都是X,Y,浏览器及元素的各项尺寸时Height,Width;检测相对于浏览器的位置:event.clientX/event.clientY

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!