可扩展的移动设备上搜索表单

标签: 代码分享 搜索 | 发表时间:2012-08-13 13:47 | 作者:wantfee
出处:http://startwmlife.com

上次我写了一篇创建有关 移动设备上的导航的教程,今天我将和大家分享一个合适移动设备和互动设计的可扩展的搜索表单。这个技术用到了CSS属性的负值,但不需要JavaScript和额外的标签,是非常简单和有效的设计简洁搜索表单的方法。

查看示例可扩展搜索表单

目标

在移动设备上,每一像素都很重要。为了在小空间内显示搜索表单,会将表单设计的相对简洁,然后在激活的时候扩展至全宽度。这样就能够给其他界面元素或者内容区域腾出空间。你可以在Web Designer Wall和 Best Web Gallery上看到这种搜索框。当你点击输入区域,它就会扩展到全宽度。

web-designer-wall-search.png

在Best Web Gallery上,我使用了jQuery给搜索表单加入了点击搜索按钮时的淡入效果。

best-web-gallery-search.png

我们开始:HTML代码

下面是一个简单的HTML表单。使用了HTML5的输入标签。

<form>
<input type="search" placeholder="Search">
</form>

重置默认的Webkit引擎下的Input样式

在默认情况下,以Webkit引擎为核心的浏览器的Input标签默认样式如下:

webkit-search-input.png

为了移除默认样式,让其看上去只是一个普通的文字区域,我们添加如下CSS代码:

input[type=search] {
-webkit-appearance: textfield;
-webkit-box-sizing: content-box;
font-family: inherit;
font-size: 100%;
} 

input::-webkit-search-decoration,
input::-webkit-search-cancel-button {
display: none;
}

样式化input元素(查看示例)

由于CSS代码非常直白,所以我这里不作逐行解释。注意搜索输入框的宽度设置为了55像素,而在激活后会扩展到130像素。其中的transition属性是实现动画效果的技巧。Box-shadow属性给input标签添加了发光的效果。

如果你需要进一步了解border-radius或者box-shadow属性,可以阅读《CSS3基础》这篇文章。

style-search-input.png

例子B(查看示例)

在示例B中,搜索输入框进一步的最小化,只有搜索图标显示出来,而没有输入框。注意我在这里更改了输入框的内边距和宽度属性,目的是得到一个完美的圆形按钮。我使用了color : transparent来让文字不可见。

demo-b-css.png

浏览器兼容性

这种可扩展的表单效果兼容所有的主流浏览器,例如Chrome, Firefox, Safari和 IE8+。但不支持IE7及以下版本的浏览器,原因是IE不支持: focus伪类元素。

原文: 《Expandable Mobile Search Form》

相关文章

相关 [扩展 移动设备 搜索] 推荐:

可扩展的移动设备上搜索表单

- - 飞鱼的声纳
上次我写了一篇创建有关 移动设备上的导航的教程,今天我将和大家分享一个合适移动设备和互动设计的可扩展的搜索表单. 这个技术用到了CSS属性的负值,但不需要JavaScript和额外的标签,是非常简单和有效的设计简洁搜索表单的方法. 在移动设备上,每一像素都很重要. 为了在小空间内显示搜索表单,会将表单设计的相对简洁,然后在激活的时候扩展至全宽度.

Google 测试在移动搜索结果里加入快速预览按钮,带你到适合移动设备观看的网页

- - 谷奥——探寻谷歌的奥秘
有人发现在用手机进行Google搜索的时候,搜索结果右侧出现一个醒目的Quick view按钮,点击即可直接进入到一个叫做快速预览的页面里,似乎看起来就好像是该网站的移动版,但应该是Google重新排版的:. 另外就是Quick view其实不是第一次出现在搜索结果里,当你的搜索结果里出现PDF文件的时候,就可看到一个Quick view按钮方便快速预览PDF文件.

Chrome 相似图片搜索扩展 LeiTu Image Search

- zg - 谷奥——探寻谷歌的奥秘
感谢读者 sligtCats 的自爆. LeiTu Image Search这货是sligtCats昨天晚上制作的Chrome类似图片搜索扩展(简称类图搜索). 安装之后可以在图片上右键即开始搜索和它类似的图片. 内有TinEye、Google Search by image和百度识图三个功能,可以按需使用.

Google 正式开始扩展搜索结果里的 Sitelinks

- 迎客松 - 谷奥——探寻谷歌的奥秘
几个月前我们就发现过Google在测试扩展的Sitelinks,今天Google正式确认了这一改动. Google认为更多更丰富的sitelinks将可帮助用户快速找到他们要的内容. 上图是改动前后的对比,可以看到以前搜索Apple只有8个sitelinks,且布局紧凑,只显示标题. 而现在则将所有Apple网站的栏目都显示了出来(如果栏目很多,最多会显示12个),且布局松散,有大量的留白,除了标题还同时显示网址和摘要文字.

Google 官方推出双语搜索建议 Chrome 扩展

- pomT - 谷奥——探寻谷歌的奥秘
今天Google中国官方推出了一款打通搜索和翻译的Chrome扩展双语搜索建议. 安装之后即可在Google搜索里看到双语的搜索建议(如上图). 默认是中文翻英文,你也可以修改成其它语言:. 然后在扩展的设置里可以选择更多的语言(总共53种),以及所应用到的搜索产品:. 找日本动画片相当方便了,直接搜索建议里给出的日语即可:.

将书签写进 Google 搜索结果的 Chrome 扩展 GMark

- 饭团 - 谷奥——探寻谷歌的奥秘
感谢读者 Sneezry 的自爆. 也许你在浏览器里收藏了大量的网址,但后来却忘了自己收藏过某个网站,转而还是用Google去搜索. 那么何不将自己的书签直接整合进Google搜索显示,在触发一个搜索关键字的时候,直接置顶提示你之前收藏过相关的网站呢. Sneezry就写了这么个叫做GMark的Chrome扩展,实现我们的设想(如上图).

让 Google 网页搜索无限滚动的 Chrome 扩展 Google Unlimited Search

- authur - 谷奥——探寻谷歌的奥秘
感谢扩展作者 Sneezry 的自爆. 我们之前报道过Google正在小范围测试可无限下滚的网页搜索结果页面,如果你喜欢类似Google Images的无限下滚界面,那么也应该希望让Google网页搜索也变成这样吧. Google Unlimited Search这枚Chrome扩展即可实现这个目的,安装之后在Google网页搜索结果页面向下滚动时,网页会自动刷新加载更多的10个结果,整个体验很流畅,省得一次一次按下一页了哦.

移动设备手势设计初探

- redhobor - 腾讯CDC
  嘿~最近在做各种移动端的产品,设计啊体验啊操作啊,用的手都起茧,工作之余也思考了“手”这种较新的交互方式,以及它与界面的关系. 本文从手势的种类,应用场景,存在的可用性问题以及如何设计四个大的部分谈起,在此抛砖引玉供大家思考和学习.   移动设备大行其道的今天,手势是一个流行词汇,那手势是什么呢.