css implements a beautiful query box_html/css_WEB-ITnose-HTML Tutorial-php.cn

css implements a beautiful query box_html/css_WEB-ITnose

WBOY

Release： 2016-06-24 11:52:30

Original

1242 people have browsed it

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>

Copy after login

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>

Copy after login

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>

Copy after login

If you have any questions, please contact:

QQ: 1004740957

Email ：niujp08@qq.com