欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

分享8款純CSS3實(shí)現(xiàn)的搜索框功能

  發(fā)布時(shí)間：2017-09-14 09:43:37   作者：佚名   我要評(píng)論
本文通過(guò)實(shí)例代碼給大家分享8款純CSS3實(shí)現(xiàn)的搜索框功能，代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下吧

效果圖：

<!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="請(qǐng)輸入您要搜索的內(nèi)容...">  
            <button type="submit"></button>  
        </form>  
    </div>  
    <div class="search bar2">  
        <form>  
            <input type="text" placeholder="請(qǐng)輸入您要搜索的內(nèi)容...">  
            <button type="submit"></button>  
        </form>  
    </div>  
    <div class="search bar3">  
        <form>  
            <input type="text" placeholder="請(qǐng)輸入您要搜索的內(nèi)容...">  
            <button type="submit"></button>  
        </form>  
    </div>  
    <div class="search bar4">  
        <form>  
            <input type="text" placeholder="請(qǐng)輸入您要搜索的內(nèi)容...">  
            <button type="submit"></button>  
        </form>  
    </div>  
    <div class="search bar5">  
        <form>  
            <input type="text" placeholder="請(qǐng)輸入您要搜索的內(nèi)容...">  
            <button type="submit"></button>  
        </form>  
    </div>  
    <div class="search bar6">  
        <form>  
            <input type="text" placeholder="請(qǐng)輸入您要搜索的內(nèi)容...">  
            <button type="submit"></button>  
        </form>  
    </div>  
    <div class="search bar7">  
        <form>  
            <input type="text" placeholder="請(qǐng)輸入您要搜索的內(nèi)容...">  
            <button type="submit"></button>  
        </form>  
    </div>  
    <div class="search bar8">  
        <form>  
            <input type="text" placeholder="請(qǐng)輸入您要搜索的內(nèi)容...">  
            <button type="submit"></button>  
        </form>  
    </div>  
</div>  
</body>  
</html>

總結(jié)

以上所述是小編給大家介紹的 分享8款純CSS3實(shí)現(xiàn)的搜索框功能，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

相關(guān)文章

  • 基于html css實(shí)現(xiàn)帶搜索圖標(biāo)的搜索框功能

    這篇文章主要介紹了基于html css實(shí)現(xiàn)帶搜索圖標(biāo)的搜索框功能,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
    2019-10-09

  • css3的動(dòng)畫特效之動(dòng)畫序列（animation）

    這篇文章主要介紹了css3的動(dòng)畫特效之動(dòng)畫序列（animation） 的相關(guān)資料，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2017-12-22

  • CSS實(shí)現(xiàn)隱藏搜索框功能(動(dòng)畫正反向序列)

    純CSS實(shí)現(xiàn)動(dòng)畫效果：鼠標(biāo)移上圖標(biāo)顯示搜索框，鼠標(biāo)移出隱藏搜索框，這種效果給用戶帶來(lái)很好的體驗(yàn)效果，下面小編給大家?guī)?lái)了CSS實(shí)現(xiàn)隱藏搜索框功能(動(dòng)畫正反向序列)的完整
    2021-07-19

最新評(píng)論