简单实现可伸缩搜索框

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

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

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

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

原来搜索框是随便放的,都没去优化,于是现在干脆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. 活着,就要不断折腾。黑白无休,这就是态度。继续保持啊。

    沙发!
  2. QWQ窝现在不想折腾…其实是不会

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

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

    4F
  5. 第一次来这,围观下博主文章

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

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

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

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

    8F
  9. 折腾折腾更健康。
    有事没事就折腾。

    9F

怎么样?你也说一句吧!

gravatar

汗 色 悲 闭嘴 调皮 笑 惊 亲 雷 馋 晕 酷 奸 怒 狂 萌 吃 贪 囧 羞 哭