Web全栈笔记

曾经的雄心壮志,如今的低头打码

工作中实用代码之搜索栏(赶紧收藏)
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>搜索框</title>
    <style>
        *{margin: 0;padding: 0;font-family: "微软雅黑";}
        input{outline: none;border: 0;}
        .search_box{ width: 500px; height: 35px; border:2px solid teal; margin: 100px auto; font-size: 14px;}
        .search_box input,.search_box label{ height: 35px; line-height: 35px; padding:0 10px;}
        .search_box .search_txt{float: left; width: 420px; position: relative; overflow: hidden;}
        .search_box .search_txt input{ width: 100%; position: relative; background: transparent;}
        .search_box .search_txt label{ position: absolute; top: 0; left: 0; width: 100%; color: #999;}
        .search_box .search_btn{ float: left; width: 80px; background: teal; font-size: 16px; color: #FFF; cursor: pointer;}
    </style>
</head>
<body>
    <div class="search_box">
        <div class="search_txt">
            <label>请输入需要搜索的内容</label>
            <input type="text" value=""/>
        </div>
        <input type="button" value="搜&nbsp;索" class="search_btn"/>
    </div>
    <script type="text/javascript" src="jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
        var temp = 0;
        $(".search_txt input").focus(function(){
            $(this).siblings().hide();
        });
        $(".search_txt input").blur(function(){
            if($(this).val() ==""){
                $(this).siblings().show();
            }
        });
    </script>
</body>
</html>

效果图:
这里写图片描述

阅读更多
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/lijiajun95/article/details/53983508
文章标签: 搜索 工作
个人分类: Web前端开发
想对作者说点什么? 我来说一句

收藏的js实用代码2

2009年05月21日 55KB 下载

收藏的js实用代码

2009年05月21日 30KB 下载

植物大战僵尸源代码

2012年10月21日 9.04MB 下载

10款JQUERY的实用代码

2009年02月12日 579KB 下载

没有更多推荐了,返回首页

不良信息举报

工作中实用代码之搜索栏(赶紧收藏)

最多只允许输入30个字

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭