制作一个美观的搜索框

步骤：

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>