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

原创 2017年01月02日 22:38:08
<!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>

效果图:
这里写图片描述

版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

淘宝网频道淘宝网搜索栏代码

  • 2010年11月25日 10:10
  • 5KB
  • 下载

vim 的各种用法,很实用哦,都是本人是在工作中学习和总结的

(一)初级个性化配置你的vim 1、vim是什么? vim是Vi IMproved,是编辑器Vi的一个加强版,一个极其强大并符合IT工程师(程序员、运维)习惯的编辑器。如果你是一名职业的SE,那么一定...

工作中很实用的各种表格

  • 2011年03月22日 11:25
  • 1.05MB
  • 下载

[记忆向]工作中一些实用的Linux命令组合(持续)

Linux命令大家在工作中都会用到,  但命令很多, 参数也太复杂, 若专门化时间去学习, 往往效果欠佳. 唯有在工作实战中, 结合使用场景, 一边使用, 一边学习. 1.xargs  这是一个神奇的...

工作中使用git的实用技巧总结

工作中使用git的实用技巧总结 本文仅涉及工作中常用的比较实用的技巧和方法,并不会涉及大而全的. 所以关于如何安装git,或者git stash的用法请自行Google.创建一个新的本地git分支g...

工作中常用算法(很实用)

  • 2008年11月20日 19:35
  • 1KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:工作中实用代码之搜索栏(赶紧收藏)
举报原因:
原因补充:

(最多只允许输入30个字)