css implements a beautiful query box_html/css_WEB-ITnose

I saw a very beautiful search box, so I implemented it and now show it to everyone, I hope you like it.

First, look at the effect.

When losing focus

When gaining focus

When the mouse passes the go button

The above shows the effect after implementation. The implementation is mainly controlled by css. Again, the events of text gaining focus and losing focus are added , the following is the detailed code:

1. css style

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

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

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

If you have any questions, please contact:

QQ: 1004740957

Email ：niujp08@qq.com