专栏首页跟牛老师一起学WEBGIScss实现一款漂亮的查询框

css实现一款漂亮的查询框

看到一款很漂亮的搜索框,于是就实现了下,现在展现给大家,希望大家喜欢。

首先,看看效果。

失去焦点时

获得焦点时

鼠标经过go按钮时

上面展示的是实现后的效果,实现的主要在css控制,再次,添加了text的获得焦点和失去焦点的事件,下面是详细代码:

1、css样式

    <style type="text/css">
        html, body, div{
            font-size: 12px;
            font-family: "Meiryo","微软雅黑";
        }
        .box{
            margin: 20px;
            position: relative;
        }
        .search-icon{
            background: url(search.png) no-repeat;
            width:25px;
            height: 25px;
            display:block;
            float: left;
            position: absolute;
            left: 2px;
            top: 5px;
        }
        .before{
            font-size:0.875em;
            padding:.3em 2em .3em;
            border:2px solid rgb(241,202,126);
            width: 120px;
            height: 33px;
        }
        .after{
            font-size:0.875em;
            padding:.3em 2em .3em;
            border:1px solid rgb(241,202,126);
            /*border:1px solid #4997d2;*/
            width: 240px;
            height: 33px;
        }
        .btn{
            border: none;
            position:absolute;
            left: 200px;
            top:2px;
            height: 29px;
            width: 38px;
            display:inline-block;
            padding:.3em .5em .3em;
            font-family:"Avenir LT W01 65 Medium", Arial, Helvetica, sans-serif;
            color:#4997d2;
            background: #fff;
        }
        .btn:hover{
            cursor:pointer;
            background-color:#4997d2;
            color:white
        }
    </style>

2、js代码

    <script src="../jquery-1.8.3.js"></script>
    <script>
        function showBefore(){
            $("input#name").removeClass("after").addClass("before").val("");
            $("button#search").hide();
        }
        function showAfter(){
            $("input#name").removeClass("before").addClass("after");
            $("button#search").show();
        }
    </script>

3、html代码

<div class="box">
    <span class="search-icon"></span>
    <input class="before" id="name" type="search" name="q" placeholder="Search" autocomplete="off" onFocus="showAfter()" onblur="showBefore()"/>
    <button type="submit" class="btn" id="search" style="display: none;">GO</button>
</div>

如有疑问可联系:

QQ:1004740957

Email:niujp08@qq.com

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • jquery封装的时间轴

    很多时候,都会用到类似于时间轴的东西,鉴于网络资源没有那么顺手,就想着自己搞一个,在此将源码贴出来。

    lzugis
  • 纯CSS实现小三角提示信息

    lzugis
  • Javascript+CSS实现影像卷帘效果

    用过Arcgis的筒子们对于Arcmap里面的一个卷帘效果肯定记忆很深刻,想把它搬到自己的WebGIS系统中去,抱着同样的想法,我也对这种比较炫的卷帘效果做了一...

    lzugis
  • thinkPHP利用ajax异步上传图片并显示、删除的示例

    利用原始的文件上传处理,虽然通过原始js语句能实时显示上传图片,但是这样的话会涉及很多兼容问题。使用ajax技术,实现选择性删除所选图片功能,并不会有兼容问题。

    砸漏
  • thinkPHP利用ajax异步上传图片并显示、删除的示例

    利用原始的文件上传处理,虽然通过原始js语句能实时显示上传图片,但是这样的话会涉及很多兼容问题。使用ajax技术,实现选择性删除所选图片功能,并不会有兼容问题。

    砸漏
  • css3实现圆角边框渐变

    <button class="border">112233</button>   创建button .border{ position: relative; ...

    就只是小茗
  • CSS3 Loading加载效果合集

    无道
  • 从 JavaScript 到 TypeScript

    TypeScript 并不是一个完全新的语言, 它是 JavaScript 的超集,为 JavaScript 的生态增加了类型机制,并最终将代码编译为纯粹的 J...

    一个会写诗的程序员
  • 你不知道的css(一)

    最近在看张鑫旭老师的《css世界》,记录第二章有关宽高很有意思的东西: 1.如何用html片段实现一个凹和凸字呢?

    2014v
  • 给WordPress或网站内添加新年挂灯笼特效

    源码及教材源自知更鸟:http://zmingcx.com/hanging-lantern.html

    AlexTao

扫码关注云+社区

领取腾讯云代金券