简单实现可伸缩搜索框

电脑手机 郑永 3460℃ 17评论 显示侧边栏

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

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

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

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

原来搜索框是随便放的,都没去优化,于是现在干脆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;
}

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

转载请注明:郑永博客 » 简单实现可伸缩搜索框

历史上的今天:

(17)个小伙伴在吐槽
Loading...
  1. 赵强2014-09-10 11:33 Google Chrome 37 Windows 7 回复

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

    沙发!
    • 郑永2014-09-10 20:58 Firefox 32 Windows XP 回复

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

  2. vitas2014-09-10 17:13 Google Chrome 37 Windows 7 回复

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

    板凳!
    • 郑永2014-09-10 20:56 Firefox 32 Windows XP 回复

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

    • vitas2014-09-13 16:05 Android Webkit 4 Android 4.1.1 回复

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

  3. zwwooooo2014-09-10 21:19 Firefox 32 Windows 8.1 回复

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

    地板!
    • 郑永2014-09-10 21:23 Firefox 32 Windows XP 回复

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

    • 郑永2014-09-10 21:24 Firefox 32 Windows XP 回复

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

  4. Eric_plus2014-09-10 22:33 Google Chrome 34 Windows 7 回复

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

    4楼
  5. 1980jz2014-09-11 11:51 Firefox 31 Windows 7 回复

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

    5楼
  6. giant8882014-09-11 12:37 Firefox 31 Windows XP 回复

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

    6楼
    • 郑永2014-09-11 20:54 Firefox 32 Windows XP 回复

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

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

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

    7楼
  8. 好东西,赞一个,感谢博主无私。。

    8楼
  9. maillot saxo bank2014-09-15 14:13 Google Chrome 30 Windows 7 回复

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

    9楼
gravatar
发表我的评论
取消评论


Hi,请填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址