html5 type search,input type="search"搜索的坑

submit事件要选择form元素

$('#form').submit(function (e) {

e.preventDefault()

e.stopPropagation()

search()

}

设置input autocomplete="off"去掉弹出的下拉框；

将默认的“x”隐藏掉：

input[type="search"]::-webkit-search-cancel-button{

display: none;

}

针对ios 设置样式, 去除ios下input 椭圆形:

-webkit-appearance: none;

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

::-webkit-input-placeholder

::-webkit-search-cancel-button

重写占位符样式

input[type=search]::-webkit-input-placeholder{

color: blue;

}

重写后面的小×样式

input[type=search]::-webkit-search-cancel-button{

-webkit-appearance: none;//此处只是去掉默认的小×

}

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;

}