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