input[type=search]

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

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

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

重写边框样式

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

重写占位符样式

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

重写后面的小×样式

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

经过上面三步的重写样式，基本达到了我们需要的效果的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;
}
 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

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

关于软键盘上的搜索按钮

我们知道软键盘上有个搜索按钮
这里写图片描述
但是此时我们看到的并没有search按钮，而是一个return按钮，这就是问题所在。

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

<form action="#">
    <input type="search"/>
</form>
 1
2
3

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

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

杂碎

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

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

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