纯CSS制作网站可伸缩的搜索框
网站搜索功能在我们自己做网站时，是必不可少的。在之前的课程中我们也介绍了如何制作网站搜索功能，通过这个方法，我们可以制作出自己网站的搜索框。
对于一些网站，由于版面限制，普通的搜索框无法适用，需要制作可伸缩搜索框。不点击时，搜索框是收缩状态，只显示一个搜索图标，点击后，就展示整个搜索框。
网站可伸缩搜索框效果如下：
点击前的收缩状态：
点击后的伸展状态：
这种网站可伸缩搜索框如何制作呢，下面学做网站论坛就来教学建网站新手们制作这种可伸缩搜索框。
第一步：在网站需要显示搜索框的位置放入以下的搜索框代码：（以下代码只适用于Wordpress，其它程序请自己修改一下提交地址）
<form id="search" action="<?php bloginfo('url'); ?>/" target="_blank" class="clearfix searform">
<input id="s" name="s" class="animatedSearch" type="text" style="border:none"/>
</form>
<input id="s" name="s" class="animatedSearch" type="text" style="border:none"/>
</form>
第二步：以自己网站的CSS文件里，粘贴以下的CSS样式代码，控制可伸缩搜索框的样式。
.searform{position:relative;}
.animatedSearch {width: 44px;height: 44px;margin-top: 24px;margin-right: 10px;padding:0 10px;float: right;
border-radius: 44px;font-size: 1.2em;background: #007bc7 url(images/new_fdj.png)no-repeat 50%;color: #fff;transition: width 0.4s ease-in-out;}
.animatedSearch:focus {width: 100%;background: #007bc7 url(images/new_fdj.png)no-repeat 95% 50%;outline:none;}
.animatedSearch {width: 44px;height: 44px;margin-top: 24px;margin-right: 10px;padding:0 10px;float: right;
border-radius: 44px;font-size: 1.2em;background: #007bc7 url(images/new_fdj.png)no-repeat 50%;color: #fff;transition: width 0.4s ease-in-out;}
.animatedSearch:focus {width: 100%;background: #007bc7 url(images/new_fdj.png)no-repeat 95% 50%;outline:none;}
第三步：还需要保存一下那个搜索放大镜的图片，放在自己的图片文件片里。图片地址：https://www.xuewangzhan.net/wp-content/uploads/2017/11/new_fdj.png
第四步：OK！所有的步骤都结束了，你的网站已有拥有了一个 可伸缩搜索框。就是这样的简单，无需任意的JS代码，只需要HTML和CSS就完美搞定。
