关闭

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

标签: 搜索工作
370人阅读 评论(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>

效果图:
这里写图片描述

0
0
查看评论
发表评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场

使用bootstrap制作搜索框

在项目开发过程中,我们或多或少都会使用到搜索选项, 那么如何制作一个标准,好看的搜索框呢,这里推荐bootstrap自带的一个控件-input-group 这个控件在bootstrap中文网上没有...
  • wuhawang
  • wuhawang
  • 2016-08-16 09:51
  • 25162

Android仿“知乎”隐藏标题栏、回答详情页动画效果

转载请注明出处:http://blog.csdn.net/zhaokaiqiang1992      2014已经远去,2015年的目标很简单,就是继续熟悉Android的上层API,虽然偶尔会...
  • jdsjlzx
  • jdsjlzx
  • 2015-05-21 17:15
  • 26605

Android实现上下滑动隐藏/显示工具栏

对于移动端,为了留出更多的空间来显示内容,我们在向上滑动视图的时候,总是希望,顶部工具栏和底部工具栏可以随着我们向上滑动的手势而自动隐藏。而当我们浏览完内容,向下滑动视图的时候,又希望工具栏可以自动显...
  • futureshine1
  • futureshine1
  • 2016-02-29 22:02
  • 3923

Win7实用技巧(一):去除搜索栏的搜索记录

Win7的搜索功能强大了不少,但是使用过后会留下烦人的搜索记录,如下图:     接下来,笔者将为读者介绍如何去掉烦人的搜索记录。    第一步: 按快捷键Win+R,输入“gpedit...
  • it_mac
  • it_mac
  • 2013-05-21 00:06
  • 843

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

  • 2010-11-25 10:10
  • 5KB
  • 下载

工作中很实用的各种表格

  • 2011-03-22 11:25
  • 1.05MB
  • 下载

实用沟通技巧,工作中的工具 沟通技巧

  • 2012-05-28 16:48
  • 580KB
  • 下载

SQL常用语句(在工作中总结的语句,绝对实用)

  • 2008-09-12 17:02
  • 6KB
  • 下载

近三百种工作中实用的各类文档和表格

  • 2008-08-05 00:04
  • 1.21MB
  • 下载

安全操作规程汇编-安全工作中相当实用的东东

  • 2009-01-08 09:23
  • 228KB
  • 下载
    个人资料
    • 访问:126542次
    • 积分:1474
    • 等级:
    • 排名:千里之外
    • 原创:36篇
    • 转载:6篇
    • 译文:0篇
    • 评论:19条
    最新评论