首页 > web前端 > html教程 > css实现一款漂亮的查询框_html/css_WEB-ITnose

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

WBOY
发布: 2016-06-24 11:52:30
原创
1242 人浏览过

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


首先,看看效果。



失去焦点时


获得焦点时


鼠标经过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

来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板