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 条评论
登录 后参与评论

相关文章

来自专栏Android-薛之涛

Android-ConstraintLayout详解(下)

我们接着上一篇说一说ConstraintLayout的其他属性,如果没看过上一篇:Android-ConstraintLayout详解 先罗列一下此次的会议内...

22230
来自专栏一“技”之长

iOS动画开发之二——UIView动画执行的另一种方式

        上一篇博客中介绍了UIView的一些常用动画,通过block块,我们可以很方便简洁的创建出动画效果:http://my.oschina.net/...

9630
来自专栏吴伟祥

IDEA的快捷键应用 原

Ctrl+Shift+Alt+鼠标 (左手按着ctrl+shift+alt右手鼠标点击想要选择的位置)

10930
来自专栏糊一笑

移动端APP列表点透事件处理方法

关于点透事件这里不再赘述,如果不清楚的可以上网搜一搜,或者看小火柴的这篇文章。 这里是自己在做移动端时,在列表滑动的时候,遇到的点透问题。出现这个问题的来由是因...

38150
来自专栏Go 语言编程

Go 语言读写 Excel 文档

Excelize 是 Go 语言编写的一个用来操作 Office Excel 文档类库,基于 ECMA-376 Office OpenXML 标准。可以使用它来...

551120
来自专栏向治洪

React Native导航器之react-navigation使用

在上一节Navigation组件,我们使用系统提供的导航组件做了一个跳转的例子,不过其实战能力不强,这里推荐一个超牛逼的第三方库:react-navigatio...

2.2K70
来自专栏xx_Cc的学习总结专栏

六天完成一个简单iOS App - 第二天

29950
来自专栏coder修行路

jQuery

jQuery基础 1、    jQuery其实就是一个类库,集成了DOM/BOM/JavaScript的类库 http://jquery.cuishifen...

49850
来自专栏韩东吉的Unity杂货铺

零基础入门 22: UGUI Panel

今天要给大家分享的。。。可谓是,非常的简单啊,我甚至都在考虑要不要单独抽出一次当做分享内容 (・-・*),也有可能是我所有分享里文字数目最少的

38320
来自专栏Angular&服务

VSCode开发Angular2+TypeScript插件

1.Angular TypeScript Snippets for VS Code 2.Angular VS Code TypeScript and HTML...

22420

扫码关注云+社区

领取腾讯云代金券