HTML5实践-可伸缩的mobile搜索框图文详解-木庄网络博客

本文摘自PHP中文网，作者黄舟，侵删。

今天我将介绍如何使用css制作一个可伸缩的mobile的搜索框，他非常适合于mobile的响应式设计的需要。本教程没有使用JavaScript，只使用了原生css属性，所以这是一个非常简单而高效的实现。

　　目的

　　在移动设备上显示信息，要做到寸土寸金，珍惜每一寸的屏幕。例如搜索框的设计，在一般情况下处于收缩状态，激活的时候才将他扩展开来，这样做可以为屏幕上其他元素提供更多地显示区域。这就是本课程要完成的工作。我们先来看一个效果图：

　　在我的站点 Best Web Gallery 也有类似的设计，当查询按钮被点击的时候，触发jquery的focus事件用来渐入搜索框。

　　HTML代码

　　下面的代码使用了html5的search标签：

1 2	`<form>` `<input` `type="search"` `placeholder="Search"></form>`

　　重新设置webkit默认搜索输入框

　　默认的webkit输入框的风格如下：

　　为了移除默认效果，让他看起来更像一般的文字输入框，我们需要添加如下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;
}