简单实现可伸缩搜索框
好吧,这两天憋得慌,还是先分享一个特别简单高端大气的可伸缩搜索框,用在手机端里面感觉很赞!另祝大家中秋后。。更快乐,呵呵。
这两天都在做什么呢?总之感觉很累,主要是我这样的菜鸟又开始折腾主题了,折腾手机端主题,受西班牙的一个华人小盆友影响,已经几年不折腾主题的我这两天又开始折腾了,我最怕代码,一看就是几小时,有时候被缓存玩死,还以为代码出错,翻山越岭的倒腾到最后,发现是手机浏览器缓存问题,我擦~~
话说我这主题已经有保持半年多没动了,这点可为我省不少时间啊,要是以往惯例,喜欢尝鲜是人之皆有,问题是菜鸟折腾主题真的要花好多时间和精力,所以庆幸的是,半年期间也没少逛,居然还是觉得自己的主题最好看,能这么久一直保持新鲜,真的不容易 - - ,我看我已经定型了,或许思想没进步,一直在和主题同步,也许我越来越懒了,再不然就是我看到代码真的怕了。
好吧,原来就是想赶紧弄完主题,好好吐槽文章就行,无奈这次又被勾引上了,这几天一直在折腾手机端,还有部分功能未完成,但是已经快完了,今天还有点时间,就分享一下期间改搜索框时找到的好东东。
原来搜索框是随便放的,都没去优化,于是现在干脆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;
}
没了,点这里看看演示,嫌麻烦的话,直接用手机进入我的博客,也可以看到效果,这种可伸缩放手机端小地方最适合了。
上一篇:做了几件关于QQ的事情
下一篇:主题优化小记
活着,就要不断折腾。黑白无休,这就是态度。继续保持啊。
@赵强 zww那句:因为喜欢,所以折腾。 其实折腾是很享受的,就是我这个人折腾起来不安排时间的,所以。。。
QWQ窝现在不想折腾…其实是不会
@vitas 话说你的博客地址是多少?呵呵,很想拜访一下。
@郑永 QwQ一直没时间弄,域名一直在手里挂起
好吧,这个是核心了:
.style1:focus{
width: 160px;
}
@zwwooooo 嗯,改变宽度,能变成auto或则100%么?好像不行,随口问问,哈哈。
@zwwooooo 菜鸟就是这样,不能肯定能否,就只能硬着头皮去试。
width前后值的变化,加上.style1:focus的控制,算是实现了可伸缩的效果了
@Eric_plus 恩,简单高效。
你的主题已经很漂亮了,是我喜欢的类型。但是要想直接应用的话,还是有点麻烦。
修改又不是我所擅长的,懒得折腾了。
@giant888 这主题很久没改了,最近又改了很多地方啊。如果直接用也可以,修改的地方很少啊,直接去掉代码即可。
有意思,博主对这方面还是挺有研究的,加油!
【红博客】-关注中小企业及创业
第一次来这,围观下博主文章
好东西,赞一个,感谢博主无私。。
折腾折腾更健康。
有事没事就折腾。
@maillot saxo bank 广告能人。