HTML5搜索框input[type=search]
input [type=search] 是HTML新属性 ， 定义⽤于搜索的⽂本字段；
x-webkit-speech 属性：在GOOGLE浏览器上 还会显⽰⼀个⼩话筒
autocomplete=”off” 属性 关闭浏览器⾃动记录之前输⼊的值
webkit内核浏览器⾥ input 框类型如果是 type=”search” ，那么将会有边框问题，border:0px 也不能起到作⽤；
解决办法:
input[type=”search”]{-webkit-appearance:none;}
在移动设备上，每⼀像素都很重要。为了在⼩空间内显⽰搜索表单，会将表单设计的相对简洁，然后在激活的时候扩展⾄全宽度。这样就能够给其他界⾯元素或者内容区域腾出空间。你可以在Web Designer Wall和Best Web Gallery上看到这种搜索框。当你点击输⼊区域，它就会扩展到全宽度
我们开始：HTML代码
下⾯是⼀个简单的HTML表单。使⽤了html5的输⼊标签。
<Form>
<input type="search"placeholder="Search">
</form>
重置默认的Webkit引擎下的Input样式
在默认情况下，以Webkit引擎为核⼼的浏览器的Input标签默认样式如下：
为了移除默认样式，让其看上去只是⼀个普通的⽂字区域，我们添加如下CSS代码：
input[type=search]{
-
webkit-appearance: textfield;
-webkit-box-sizing: content-box;
input标签placeholder属性font-family: inherit;
font-size: 100%;
}
input::-webkit-search-decoration,
input::-webkit-search-cancel-button{
display: none;
}
样式化input元素:
注意搜索输⼊框的宽度设置为了55像素，⽽在激活后会扩展到130像素。其中的transition属性是实现动画效果的技巧。Box-shadow属性给input标签添加了发光的效果。
例⼦B:
在⽰例B中，搜索输⼊框进⼀步的最⼩化，只有搜索图标显⽰出来，⽽没有输⼊框。注意我在这⾥更改了输⼊框的内边距和宽度属性，⽬的是得到⼀个完美的圆形按钮。我使⽤了color ： transparent来让⽂字不可见。
浏览器兼容性:
这种可扩展的表单效果兼容所有的主流浏览器，例如Chrome， Firefox， Safari和 IE8+。但不⽀持IE7及以下版本的浏览器，原因是IE不⽀持： focus伪类元素。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。