1、可扩展的移动设备上搜索表单上次我写了一篇创建有关移动设备上的导航的教程，今天我将和大家分享一个合适移动设备和互动设计的可扩展的搜索表单。这个技术用到了 CSS 属性的负值，但不需要JavaScript 和额外的标签，是非常简单和有效的设计简洁搜索表单的方法。目标在移动设备上，每一像素都很重要。为了在小空间内显示搜索表单，会将表单设计的相对简洁，然后在激活的时候扩展至全宽度。这样就能够给其他界面元素或者内容区域腾出空间。你可以在 Web Designer Wall 和 Best Web Gallery 上看到这种搜索框。当你点击输入区域，它就会扩展到全宽度。在 Best Web Gallery
2、上，我使用了 jQuery 给搜索表单加入了点击搜索按钮时的淡入效果。我们开始：HTML 代码下面是一个简单的 HTML 表单。使用了 HTML5的输入标签。重置默认的 Webkit 引擎下的 Input 样式在默认情况下，以 Webkit 引擎为核心的浏览器的 Input 标签默认样式如下：为了移除默认样式，让其看上去只是一个普通的文字区域，我们添加如下 CSS 代码：inputtype=search -webkit-appearance: textfield;-webkit-box-sizing: content-box;font-family: inherit;font-size: 10
3、0%;input:-webkit-search-decoration,input:-webkit-search-cancel-button display: none;样式化 input 元素（查看 示例 ）由于 CSS 代码非常直白，所以我这里不作逐行解释。注意搜索输入框的宽度设置为了55像素，而在激活后会扩展到 130像素。其中的 transition 属性是实现动画效果的技巧。Box-shadow 属性给 input 标签添加了发光的效果。如果你需要进一步了解 border-radius 或者 box-shadow 属性，可以阅读CSS3基础这篇文章。例子 B（查看 示例 ）在示例 B 中，搜索输入框进一步的最小化，只有搜索图标显示出来，而没有输入框。注意我在这里更改了输入框的内边距和宽度属性，目的是得到一个完美的圆形按钮。我使用了 color ： transparent 来让文字不可见。浏览器兼容性这种可扩展的表单效果兼容所有的主流浏览器，例如 Chrome， Firefox， Safari 和 IE8+。但不支持 IE7及以下版本的浏览器，原因是 IE 不支持： focus 伪类元素。-东莞市普林网络科技有限公司 http:/
