H5 input [type=search] 清除系统自带小图标-ios自带放大镜

在 H5 中 input 有了更多的 type 属性，其中设置 type=search 时，在移动端弹出的输入法右下角的【确认】按钮文字会变为【搜索】，更有利于用户体验 , 这在使这个属性在很多地方都有使用。

但是这个系统的蓝色小清除图标通常得不到设计师们的认可，那么如何去掉这个讨厌的小图标呢？

css 提供了解决办法:

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

清除ios自带放大镜

在ios15版本出来以后，input搜索框里出现两个放大镜的问题，一个是设计加入，另一个是系统默认加上的，我们也可能通过以下方法去除。

input[type="search"]{
  -webkit-appearance:none !important;
}

完美解决