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>  

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