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

来源：互联网发布：c语言教学视频谭浩强编辑：程序博客网时间：2024/06/03 18:23

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

效果图：
这里写图片描述

0 0