如何使用HTML、CSS移除移动端按钮点击效果

这个是移动端Webkit内核浏览器（iOS Safari、移动端Chrome、各类移动端内置webview）自带的默认触摸反馈效果，仅在触摸点击时触发，桌面端无此默认逻辑，不需要修改JS或后端PHP逻辑，纯CSS即可完全移除：

核心解决代码 #

在全局CSS文件中加入以下规则，直接把默认的点击高亮遮罩设为透明：

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

加完这行绝大多数移动端场景的默认点击高亮就会直接消失。 #

残留样式处理 #

如果部分按钮、链接点击后仍有样式变化，是浏览器给可交互元素预设的:active、:focus状态样式导致，追加以下规则重置即可：

/* 重置可交互元素默认系统外观 */
a, button, input[type="button"], input[type="submit"], [role="button"] {
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}
/* 不需要自定义点击反馈的话，直接让active态继承元素原有样式 */
a:active, button:active, [role="button"]:active {
  background: inherit;
  color: inherit;
  border-color: inherit;
}

注意事项 #

• 不要全局移除所有focus状态样式，否则会破坏键盘导航的无障碍访问能力，仅处理触摸触发的高亮即可
• 该效果是浏览器默认行为，和业务代码逻辑无关，不需要额外绑定JS事件做拦截

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