iPhone移动端Safari点击input出现灰色闪屏的原因及解决方案

该现象是移动端Safari的预设默认交互效果：WebKit内核为所有可交互元素（包括原生表单控件、绑定了点击行为的元素）设置了点击时的临时灰色高亮层，用于给用户提供点击反馈，该特性仅在移动端WebKit内核浏览器生效，因此桌面端Safari不会出现该表现。

在CSS中加入-webkit-tap-highlight-color属性配置即可消除该高亮效果：

• 全局禁用所有元素的点击高亮：

* {
  -webkit-tap-highlight-color: transparent;
}

• 仅针对表单相关元素禁用（避免影响链接、按钮等其他元素的默认反馈）：

input, label {
  -webkit-tap-highlight-color: transparent;
}

该属性为WebKit专属属性，仅对 Safari 等 WebKit 内核浏览器生效，不会干扰其他浏览器的正常表现。

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