css实现一款漂亮的查询框

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

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>  

标签： isp 代码

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点！
本站所提供的图片等素材，版权归原作者所有，如需使用，请与原作者联系。