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：[email protected]