制作一个美观的搜索框

步骤：

1、简单的input标签

2、css修饰

3、通过JavaScript来变得更美观

如何制作一个点击就会变长，点页面就会变短的搜索框，我们要用到的是JS，以及两个方法

一：onfocus       //焦点取得

二：onblur         //焦点失去

我们只要在点击时触发焦点获取事件，就能让他变长

失去焦点时，就会触发失去焦点的函数，使搜索框变回原来的长度

HTML部分：

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部分：