好吧，这两天憋得慌，还是先分享一个特别简单高端大气的可伸缩搜索框，用在手机端里面感觉很赞！另祝大家中秋后。。更快乐，呵呵。

这两天都在做什么呢？总之感觉很累，主要是我这样的菜鸟又开始折腾主题了，折腾手机端主题，受西班牙的一个华人小盆友影响，已经几年不折腾主题的我这两天又开始折腾了，我最怕代码，一看就是几小时，有时候被缓存玩死，还以为代码出错，翻山越岭的倒腾到最后，发现是手机浏览器缓存问题，我擦~~

话说我这主题已经有保持半年多没动了，这点可为我省不少时间啊，要是以往惯例，喜欢尝鲜是人之皆有，问题是菜鸟折腾主题真的要花好多时间和精力，所以庆幸的是，半年期间也没少逛，居然还是觉得自己的主题最好看，能这么久一直保持新鲜，真的不容易 - - ，我看我已经定型了，或许思想没进步，一直在和主题同步，也许我越来越懒了，再不然就是我看到代码真的怕了。

好吧，原来就是想赶紧弄完主题，好好吐槽文章就行，无奈这次又被勾引上了，这几天一直在折腾手机端，还有部分功能未完成，但是已经快完了，今天还有点时间，就分享一下期间改搜索框时找到的好东东。

原来搜索框是随便放的，都没去优化，于是现在干脆PC端和手机端全部优化，遇到响应式搜索框，网上找了下，看到一个挺喜欢，但是那个。。。太复杂了，而且还不能改大小，那个只能给大神折腾的，看看演示，看代码就头痛，加载一大堆东西。

好吧，下面介绍这个对菜鸟来说，既简单，又高档大气的可伸缩搜索框，在w3cfuns里面淘到的，很不错。

直接写个没有样式的新搜索框，然后步骤相当简单，直接把input改成下面这个：

最后更新：加了一个放大镜会比较亲切点。

CSS直接仍进去：

.search-input{
background: #ededed url(http://webdesignerwall.com/demo/expandable-search-form/images/search-icon.png) no-repeat 9px;
padding: 8px 5px 8px 32px;
width: 100px;
border-radius: 18px;
color: #ccc;
outline: none;
overflow:hidden;
border-radius: 18px;
border: 1px solid #ddd;
-moz-box-shadow: inset 1px 1px 10px rgba(0,0,0,0.1);
-webkit-box-shadow: inset 1px 1px 10px rgba(0,0,0,0.1);
box-shadow: inset 1px 1px 10px rgba(0,0,0,0.1);
-webkit-transition: all .3s;
-moz-transition: all .3s;
-o-transition: all .3s;
}
.search-input:hover, .search-input:focus {
border-color: #fff;
color: #444;
width: 200px;
}

没了，点这里看看演示，嫌麻烦的话，直接用手机进入我的博客，也可以看到效果，这种可伸缩放手机端小地方最适合了。