你想知道的input[type=search]
input[type=search]简介
html5对表单元素做了⼀些增强，其中对input元素，我们可以指定更多的属性来控制它，如required，autofocus，maxlength等，具体有做了哪些增强，可以阅读官⽅⽂档，也可以参照MDN。我们现在要讲的是input[type=search]这个表单元素，不是讲他如何增强，⽽是主要讲如何更加⽅便的改变它默认的样式。
input[type=search]默认样式
它默认的样式是这个样⼦的
5200ab64b6a7dc8c3586285bee19fb5a_20160529213126177.png
当输⼊⽂字的时候，会变成这个样⼦
d32a8da4b2272edb0c897456a287cf44_20160529213304334.png
我们现实开发中，肯定不会使⽤这个默认样式的，都会⾃⼰重新定义样式。但是默认的这种input[type=search]有个好处，就是但你输⼊内容的时候，搜索框后边会⾃动出现⼀个⼩×，点击这个⼩×，可以清除输⼊的内容。
如果我们⾃⼰模拟这个效果，可能会使⽤input[type=text]，也可以使⽤<div contenteditable></div>来进⾏模拟，但是不管你使⽤哪种⽅式模拟，都免不了需要使⽤js对点击后⾯的⼩×做⼀个逻辑处理。那有没有只修改默认的input[type=search]得样式，既可以实现你需要的样式，⼜不需要写⼀点js来控制点击⼩×时所做的逻辑处理？
使⽤css3新增的属性来控制input[type=search]
::-webkit-input-placeholder
::-webkit-search-cancel-button
// 因为⼀直做的移动端，所以说的这些东西都是针对移动端。
如果需要这样的⼀个效果：
6ed69442a4dc997fd1a10a34bbd76b21_20160529215917922.png
results值为⼀个数字，表⽰最多保存⼏条搜索记录，但是测试也没看出效果，就不多说了，有兴趣的可以⾃⼰google或者百度之。
>input标签placeholder属性

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