看到一款很漂亮的搜索框,于是就实现了下,现在展现给大家,希望大家喜欢。
首先,看看效果。
失去焦点时
获得焦点时
鼠标经过go按钮时
上面展示的是实现后的效果,实现的主要在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>
如有疑问可联系:
QQ:1004740957
Email:niujp08@qq.com