当前位置:首页 > 技术交流 > 正文内容

搜索框学习存档

鲍成龙2年前 (2019-10-24)技术交流9460

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

样式如下

默认样式↑

光标点击之后样式↑

存档记录:

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


相关文章

PHP中require()文件包含的正确用法

以前看一些PHP框架源码的时候,很奇怪在文件包含的时候,会用dirname(__FILE__)来拼凑文件路 径,不知道这样做有什么好处,后来终于发现了其中的缘由。我们来看一个简单的例子:有a,b,c三...

linux 封禁ip

linux 封禁ip

可以直接服务配置nginx.conf添加 deny+IP 例如:封禁单个IPdeny 106.5.76.83;#封整个段即从123.0.0.1到123.255.255.254的命令deny ...

Beyond Compare 4 开心一下

一劳永逸,修改注册表在搜索栏中输入 regedit   ,打开注册表删除项目:计算机\HKEY_CURRENT_USER\Software\Scooter Software\Bey...

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法和观点。