纯CSS前端开发中搜索框怎么写?

前端开发 设计一个搜索框|前端开发是不是可以代替设计|web前端开发需要软件下载

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>
软件开发与前端开发区别|行业调研 软件前端开发|软件前端开发思维导图
» 本文来自:前端开发者 » 《纯CSS前端开发中搜索框怎么写?》
» 本文链接地址:https://www.rokub.com/3807.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!