步骤:
1、简单的input标签
2、css修饰
3、通过JavaScript来变得更美观
如何制作一个点击就会变长,点页面就会变短的搜索框,我们要用到的是JS,以及两个方法
一:onfocus //焦点取得
二:onblur //焦点失去
我们只要在点击时触发焦点获取事件,就能让他变长
失去焦点时,就会触发失去焦点的函数,使搜索框变回原来的长度
HTML部分:
<input type="serch" id="serch" onfocus="bc()" onblur="lk()" placeholder="搜索其实很简单">
CSS部分:
#serch{
right: 50px;
top: 20px;
height: 30px;;
width: 250px;
border-radius: 5px;
font-size: 15px;
transition: 0.5s; //过渡动画时间
background-color: rgb(175, 200, 223);
border: none;
}
JS部分:
<script>
function bc(){ //搜索框取得焦点时触发的事件
document.getElementById("serch").style.width='400px';
}
function lk(){ //搜索框失去焦点时触发的事件
document.getElementById("serch").style.width='250px';
}
</script>