当前位置:网站首页 > 技术交流 > 正文

搜索框学习存档

鲍成龙 2019-10-24 67 0

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

样式如下

默认样式↑

光标点击之后样式↑

存档记录:

<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();
    });


本站文章皆为原创,本文《搜索框学习存档》于2019-10-24 00:47:12由 鲍成龙 发表!

转载请注明来自鲍成龙创作记录

标签:

鲍成龙
鲍成龙

鲍成龙

写尽千山,落笔是你

85

文章

7753

浏览