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 a4954d9fa3be698dc9e691416ed59289_20160529215944079.png

我们可能会想到使用默认的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]的样式。

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

20160529223421993.png

但是此时我们看到的并没有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" />
1
results值为一个数字，表示最多保存几条搜索记录，但是测试也没看出效果，就不多说了，有兴趣的可以自己google或者百度之。