你不知道的input[type=search]

input[type=search]简介

html5对表单元素做了一些增强，其中对input元素，我们可以指定更多的属性来控制它，如required，autofocus，maxlength等，具体有做了哪些增强，可以阅读官方文档，也可以参照MDN。我们现在要讲的是input[type=search]这个表单元素，不是讲他如何增强，而是主要讲如何更加方便的改变它默认的样式。

input[type=search]默认样式

它默认的样式是这个样子的
当输入文字的时候，会变成这个样子

我们现实开发中，肯定不会使用这个默认样式的，都会自己重新定义样式。但是默认的这种input[type=search]有个好处，就是但你输入内容的时候，搜索框后边会自动出现一个小×，点击这个小×，可以清除输入的内容。
如果我们自己模拟这个效果，可能会使用input[type=text]，也可以使用<div contenteditable></div>来进行模拟，但是不管你使用哪种方式模拟，都免不了需要使用js对点击后面的小×做一个逻辑处理。那有没有只修改默认的input[type=search]得样式，既可以实现你需要的样式，又不需要写一点js来控制点击小×时所做的逻辑处理？

使用css3新增的属性来控制input[type=search]

1. ::-webkit-input-placeholder
2. ::-webkit-search-cancel-button
3. // 因为一直做的移动端，所以说的这些东西都是针对移动端。

如果需要这样的一个效果：

我们可能会想到使用默认的input[type=search]，而只对input的外观做一个修改，因为后面的小×好像和我们需要的效果也差不多，也是灰色的圆圈里面加个白色的小×，但是不同型号的手机上，后面的小×显示的各不相同，有点显示成蓝色的小叉并且外面没有灰色圆圈包裹，有的显示的和默认的差不多，但是看起来非常丑。种种原因，我们就不得不重写所有的样式：占位符，inpu边框，后面的小叉。

重写边框样式

input[type=search]{    border-radius: 5px;    border: 1px solid #ebebeb;//必须对默认的border:2px inset覆盖，要不然下面的样式也是白搭    width: 98%;    height: 30px;    outline: none;}

重写占位符样式

input[type=search]::-webkit-input-placeholder{    color: blue;}

重写后面的小×样式

 input[type=search]::-webkit-search-cancel-button{    -webkit-appearance: none;//此处只是去掉默认的小×}

经过上面三步的重写样式，基本达到了我们需要的效果的90%，但是还没达到100%。因为第三部对小×样式的重写只是把后面的小×给弄没了，如果需要小×，还必须多做一点

继续重写小×样式

input[type=search]::-webkit-search-cancel-button{    -webkit-appearance: none;    position: relative;    height: 20px;    width: 20px;    border-radius: 50%;    background-color: #EBEBEB;}input[type=search]::-webkit-search-cancel-button:after{    position: absolute;    content: 'x';    left: 25%;    top: -12%;    font-size: 20px;    color: #fff;}

经过以上三步的重写，我们就可以完完全全的控制input[type=search]的样式。

关于软键盘上的搜索按钮

我们知道软键盘上有个搜索按钮

但是此时我们看到的并没有search按钮，而是一个return按钮，这就是问题所在。

要让return这个按钮的位置出现的是search按钮，那么就需要这样一个设置

<form action="#">    <input type="search"/></form>

就是必须设置input的type类型为search，并且被form元素包裹，form元素要有action属性。但是设置了input[type=search]，但输入内容时，后面会出现小×，为了去掉这个小×，重写下它的样式即可

input[type=search]::-webkit-search-cancel-button{    -webkit-appearance: none;//此处就是去掉默认的小×}

杂碎

input[type=search]还有一些额外的属性，比如

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

results值为一个数字，表示最多保存几条搜索记录，但是测试也没看出效果，就不多说了，有兴趣的可以自己google或者百度之。

最后