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"去掉弹出的下拉框；

针对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;//此处只是去掉默认的小×
}

上文链接：https://www.jianshu.com/p/fc64c6445eef

右侧小图标如何美化

美化效果如下图：

右侧默认的比较难看的按钮，美化成右侧效果。

input[type="search"]::-webkit-search-cancel-button{
   -webkit-appearance: none;
   height: 15px; width: 15px;
   border-radius: 8px;
   background:url("images/searchicon.png") no-repeat 0 0;
   background-size: 15px 15px;
}

用到的是伪元素::-webkit-search-cancel-button