简单实现可伸缩搜索框

2014年9月10日11:04:03 17 4,607

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

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

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

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

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

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

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

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

<input class="search-mb" type="text" value="请输入搜索内容..." onblur="if(this.value=='') value='请输入搜索内容...';" onclick="if(this.value=='请输入搜索内容...')value='';"/>

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;
}

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

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

目前评论:17   其中:访客  10   博主  7

    • 赵强 4
      Google Chrome 37 Windows 7

      活着,就要不断折腾。黑白无休,这就是态度。继续保持啊。

        • 郑永 Admin
          Firefox 32 Windows XP

          zww那句:因为喜欢,所以折腾。 其实折腾是很享受的,就是我这个人折腾起来不安排时间的,所以。。。

          @赵强

        • vitas 4
          Google Chrome 37 Windows 7

          QWQ窝现在不想折腾…其实是不会

            • 郑永 Admin
              Firefox 32 Windows XP

              话说你的博客地址是多少?呵呵,很想拜访一下。

              @vitas

              • vitas 4
                UC Browser 9 Android 4.1.1

                QwQ一直没时间弄,域名一直在手里挂起

                @郑永

              • zwwooooo 9
                Firefox 32 Windows 8.1

                好吧,这个是核心了:
                .style1:focus{
                width: 160px;
                }

                  • 郑永 Admin
                    Firefox 32 Windows XP

                    嗯,改变宽度,能变成auto或则100%么?好像不行,随口问问,哈哈。

                    @zwwooooo

                    • 郑永 Admin
                      Firefox 32 Windows XP

                      菜鸟就是这样,不能肯定能否,就只能硬着头皮去试。

                      @zwwooooo

                    • Eric_plus 2
                      Google Chrome 34 Windows 7

                      width前后值的变化,加上.style1:focus的控制,算是实现了可伸缩的效果了

                        • 郑永 Admin
                          Firefox 32 Windows XP

                          恩,简单高效。

                          @Eric_plus

                        • 1980jz 0
                          Firefox 31 Windows 7

                          第一次来这,围观下博主文章

                          • giant888 7
                            Firefox 31 Windows XP

                            你的主题已经很漂亮了,是我喜欢的类型。但是要想直接应用的话,还是有点麻烦。
                            修改又不是我所擅长的,懒得折腾了。

                              • 郑永 Admin
                                Firefox 32 Windows XP

                                这主题很久没改了,最近又改了很多地方啊。如果直接用也可以,修改的地方很少啊,直接去掉代码即可。

                                @giant888

                              • 中小企业管理软件 0
                                UC Browser 6 Windows 7

                                有意思,博主对这方面还是挺有研究的,加油!

                                【红博客】-关注中小企业及创业

                                • 迅速提升知名度 1
                                  Google Chrome 29 Windows 7

                                  好东西,赞一个,感谢博主无私。。

                                  • maillot saxo bank 4
                                    Google Chrome 30 Windows 7

                                    折腾折腾更健康。
                                    有事没事就折腾。