input type="search"搜索的坑

<form action="" id="form">
         <input id="search" type="search" placeholder="请输入客户的手机或姓名" autocomplete="off">
</form>

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;
}