CSS 如何去除移动端点击输入框时的黑色 tap 高亮闪烁阴影

问题根因 #

你观察到的点击瞬间闪现的黑色阴影，并非来自自定义代码样式，而是WebKit内核移动端浏览器的内置默认交互反馈：
iOS Safari、安卓端基于WebKit内核的内置浏览器，会为所有可交互元素默认开启点击高亮效果，对应CSS属性为-webkit-tap-highlight-color。该属性默认值为半透明黑色，会在用户触摸元素的瞬间渲染一层带模糊感的黑色阴影，即使已经给元素设置了outline: none、box-shadow: none，这个内置效果依然会独立触发，不会被常规自定义样式覆盖。

修复操作 #

• 全局覆盖默认的tap高亮属性，从根源上移除闪烁效果。注意不要使用none作为属性值，旧版本WebKit对该值的兼容性存在缺陷，需设置为完全透明色值：

  /* 全局重置WebKit点击高亮效果 */
  * {
    -webkit-tap-highlight-color: transparent;
  }
  

• 如果不想做全局样式重置，也可以精准给涉及的交互元素单独添加属性，直接拼接进你现有的CSS规则即可：

  .searchBar,
  .searchBox,
  .searchButton {
    -webkit-tap-highlight-color: transparent;
  }
  

补充说明：你现有代码中为输入框、按钮配置的outline: none、box-shadow: none仅能覆盖元素自定义的聚焦阴影，无法干预浏览器内置的tap高亮反馈，因此一直无法消除闪烁效果。修改完成后重新在移动端调试，点击搜索栏时的黑色阴影闪现问题即可解决。

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