工作中实用代码之搜索栏（赶紧收藏）

最新推荐文章于 2024-05-13 00:57:27 发布

lijiajun95

最新推荐文章于 2024-05-13 00:57:27 发布

阅读量635

点赞数

分类专栏： Web前端开发文章标签：搜索工作

本文链接：https://blog.csdn.net/lijiajun95/article/details/53983508

版权

Web前端开发专栏收录该内容

37 篇文章 0 订阅

订阅专栏

<!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>

效果图：
这里写图片描述

lijiajun95

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
工作中实用代码之搜索栏（赶紧收藏）

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>搜索框</title> <style> *{margin: 0;padding: 0;font-family: "微软雅黑";} input{outline: none;border: 0;}
复制链接

扫一扫