上面展示的是實(shí)現(xiàn)后的效果，實(shí)現(xiàn)的主要在css控制，再次，添加了text的獲得焦點(diǎn)和失去焦點(diǎn)的事件，下面是詳細(xì)代碼：

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>  

標(biāo)簽： isp 代碼

版權(quán)申明：本站文章部分自網(wǎng)絡(luò)，如有侵權(quán)，請聯(lián)系：west999com@outlook.com
特別注意：本站所有轉(zhuǎn)載文章言論不代表本站觀點(diǎn)！
本站所提供的圖片等素材，版權(quán)歸原作者所有，如需使用，請與原作者聯(lián)系。