css實現一款漂亮的查詢框

上面展示的是實現后的效果，實現的主要在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>  

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

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