CSS は美しいクエリを実装します box_html/css_WEB-ITnose-htmlチュートリアル-php.cn

CSS は美しいクエリを実装します box_html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 11:52:30

オリジナル

1241 人が閲覧しました

とても美しい検索ボックスを見つけたので、それを実装して皆さんにお見せします。気に入っていただければ幸いです。

まず、効果を見てください。

フォーカスを失ったとき

フォーカスを獲得したとき

マウスがgoボタンを通過したとき

実装後の効果は主にcssによって制御されます。、 add テキストのフォーカス取得とフォーカスの喪失のイベントは次のとおりです:

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>

ログイン後にコピー

質問連絡先:

QQ: 1004740957

メール: niujp08@qq.com