HTML5给搜索框中加一个放大镜

HTML/CSS 2012-06-06 html,html5,搜索框

小站刚加上搜索功能,由于懒惰就没有给搜索框加上样式,直接input标签了事。

昨天看HTML5相关介绍的时候发现在HTML5中的input标签有search类型,于是赶紧试用了一下

<input type="search"  />

 

type中的text类型改成search值后,其实也没有多大改变,只不过在搜索框右侧多了一个删除按钮,点击删除可以清楚搜索框里的内容

于是又是根据资料夹了一个results属性

<input results="s" type="search" />

 

加了这个属性后,搜索框就有了一个放大镜了!

神奇吧!

如果值是数字,还会出现一个三角箭头,大家可以试试

results 等于字母的效果

 

results 等于数字的效果

 

如本站的搜索框就用此方法,如果童鞋们看不到效果那么可能是你们的浏览器不支持HTML5,请更换浏览器,如Chrome

文字链接:《HTML5给搜索框中加一个放大镜

文章地址:http://www.qttc.net/20120671.html

除非标注,琼台博客所有博文均为原创,转载请加文字链接注明来源

乳名?小名?昵称?网名?均可

email,放心,我不会给你乱投广告的

想获得回访就把你的站点URL写上(没有留空)

[NOTICE]木要投放广告
[NOTICE]木要骂人,说不该说的话
[NOTICE]自由言论,但要遵纪守法

Comments 1