css实现一款漂亮的查询框_html/css_WEB-ITnose-html教程-PHP中文网

css实现一款漂亮的查询框_html/css_WEB-ITnose

php中文网

发布： 2016-06-24 11:52:30

原创

1433人浏览过

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

立即学习“前端免费学习笔记（深入）”；

首先，看看效果。

立即学习“前端免费学习笔记（深入）”；

失去焦点时

立即学习“前端免费学习笔记（深入）”；

获得焦点时

立即学习“前端免费学习笔记（深入）”；

鼠标经过go按钮时

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

蓝心千询

蓝心千询是vivo推出的一个多功能AI智能助手

查看详情

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