搜索框学习存档

在自己网站加一个搜索框，用来替换侧栏自带的搜索框

样式如下

默认样式↑

光标点击之后样式↑

存档记录：

<div class="login-txt on"><form name="search" method="post" action="http://www.baochenglong.cn/zb_system/cmd.php?act=search" class="search-box fl"><input name="q" size="11" id="edtSearch" type="text" placeholder="发现，从搜索开始！" autocomplete="off"> <button class="search-submit" id="btnPost" type="submit"><i class="iconfont icon-sousuo"></i></button></form></div>

/*搜索*/
.login-txt{padding:2px 0;position: relative;}
.login-txt form.search-box{width: 240px;}
.login-txt .search-box button,.no-style{width: 40px;background-color: transparent;color: #615c5c;}
.search-box{overflow: hidden;position: relative;}
.search-box input{width: 86%;padding: 0 50px 0 1px;border: 0;border-bottom: 1px solid #615c5c;line-height: 29px;height: 29px;color: #fff;font-size: 15px;background-color: transparent;transition:all .35s ease 0s;}
.search-box button{position: absolute;right: 0;top: 0;border: 0;line-height: 28px;height: 29px;text-align: center;}
.login-txt.on input{border: 0;border-bottom: 2px solid #fbfbfb;background-color: #0b0b0b;}
.login-txt.on button{color:#ffffff;}
.login-txt button i{transform:rotateZ(30deg);font-size: 20px;cursor:pointer;}

    $(".login-txt input").on("click", function(e){
        $(".login-txt").addClass("on");
        $(document).one("click", function(){
            $(".login-txt").removeClass("on");
        });
        e.stopPropagation();
    });
    $(".login-txt input").on("click", function(e){
        e.stopPropagation();
    });