css实现一款漂亮的查询框

看到一款很漂亮的搜索框，因而就实现了下，如今展示给你们，但愿你们喜欢。css

首先，看看效果。html

失去焦点时jquery

得到焦点时ide

鼠标通过go按钮时url

上面展现的是实现后的效果，实现的主要在css控制，再次，添加了text的得到焦点和失去焦点的事件，下面是详细代码：spa

一、css样式code

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

QQ：1004740957htm

Email：niujp08@qq.comblog