css實現一款漂亮的查詢框

看到一款很漂亮的搜索框，因而就實現了下，如今展示給你們，但願你們喜歡。

首先，看看效果。

失去焦點時

得到焦點時

鼠標通過go按鈕時

上面展現的是實現後的效果，實現的主要在css控制，再次，添加了text的得到焦點和失去焦點的事件，下面是詳細代碼：

一、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>

二、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>

三、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