搜索表单仅设border-bottom，移动端Chrome显示圆角边框问题

这问题我之前踩过坑！iOS上的Chrome其实是基于WebKit内核的，和Safari共享不少默认表单样式，所以才会出现和桌面Chrome不一致的情况——哪怕你只设置了border-bottom，它原生的圆角属性还在偷偷生效。

下面是几个针对性的解决步骤，亲测有效：

• 强制重置圆角属性：直接给搜索框设置border-radius: 0，覆盖iOS WebKit的默认圆角值：

  input[type="search"] {
    border-radius: 0;
  }
  

• 移除原生外观样式：iOS的表单元素自带特殊的原生外观，用-webkit-appearance和标准appearance属性可以彻底去掉这些默认样式：

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

• 彻底清理边框样式：有时候默认的边框其他边可能还存在，最好先把整个边框重置，再单独设置border-bottom：

  input[type="search"] {
    border: none; /* 清空所有默认边框 */
    border-bottom: 1px solid #your-desired-color; /* 仅保留底部边框 */
    border-radius: 0;
    -webkit-appearance: none;
    appearance: none;
    box-shadow: none; /* 可选：如果有默认内阴影也一起去掉 */
  }
  

把这些样式组合起来，iOS Chrome里的搜索框就会和桌面端Chrome显示一致了，不会再出现莫名其妙的圆角啦！

内容的提问来源于stack exchange，提问作者user8473431