首页 / 帝国CMS / 帝国CMS模板 /

8款通用好看的纯CSS3搜索框前端样式

2022-08-12 13:47:21帝国CMS模板阅读 0
编号:
价格: 1.00点券
其他: 立即下载
<!DOCTYPE html>
<html>
<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">
    <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>


猜你喜欢

  • 帝国CMS插件

    帝国CMS自动标题图片并随机插入正文内容的插件

    插件功能1、可以将文章标题自动设置为标题图片2、背景图片随机3、文字过多会自动变成2行,4,更多定制功能请联系站长定制5、php版本最高为7.1插件安装方法1、下载插件2、将插件上传至网站/e/extend/目录,3、找多张背景图片,将图片得宽度统一调整为500px,将图片放进src文件夹;4、访问网站地址/e/extend/autopic/action.php?pwd=3615261,生成统一的

    2022-04-10 14
  • 帝国CMS插件

    帝国cms付费可复制+下载word插件+关注公众号下载功能

    本插件支持的支付接口:虎皮椒微信,虎皮椒支付宝温馨提示:接口开通需开通带H5支付功能帝国cms付费可复制插件功能1、付费复制内容2、付费正文内容转word下载3、关注公众号免费下载内容,可以定义每天下载次数,可以关闭。多个公众号随机。4、免费下载用完跳转到付费下载5、实现不用登陆即可付费下载或者复制6、插件没有改变程序核心代码7、可以统一资源价格,也可以单独为某篇资源价格8、插件是响应式,PC和移

    2022-04-14 14
  • 帝国CMS插件

    帝国CMS7.5自动定时审核发布插件和自动提交百度插件

    帝国CMS7.5自动定时审核发布插件插件功能1、可以自定义栏目审核顺序,2、可以指定每天审核总量3、依次每个栏目审核3条,知道审核完当天的数量插件教程1、上传目录autosh到/e/extend/目录,2、修改文件//自定义审核栏目顺序 可以不设置//$classlit="4";//PC百度token$yuming="http://www.mihua114.com";//结尾不带/$token="

    2022-04-10 14