Android端HTML按钮点击出现全按钮蓝色选中状态的问题求助

这个问题我太熟啦！安卓移动端浏览器的这个蓝色高亮根本不是outline，而是浏览器自带的点击触摸高亮效果，所以你给:active加outline: none完全不对症～

给你两个靠谱的解决办法：

1. 直接禁用触摸高亮（最有效） #

用WebKit内核专属的CSS属性-webkit-tap-highlight-color，把它设为透明就能彻底去掉这个蓝色：

button {
  /* 完全移除高亮 */
  -webkit-tap-highlight-color: transparent;
  /* 如果想让高亮和按钮背景一致，也可以设置成对应颜色，比如 #ffffff */
}

注意：这个属性要加在按钮元素本身，而不是:active伪类上，因为触摸高亮是点击触发的全局效果，不是仅在激活状态生效。

2. 彻底重置按钮默认样式（可选） #

如果你的按钮本身不需要浏览器默认样式，可以同时重置其他属性，避免额外的默认交互：

button {
  -webkit-tap-highlight-color: transparent;
  /* 移除浏览器默认的按钮外观 */
  -webkit-appearance: none;
  appearance: none;
  /* 移除边框和默认轮廓 */
  border: none;
  outline: none;
  /* 可选：添加自定义的点击反馈样式，提升用户体验 */
}

button:active {
  /* 比如点击时变暗一点，让用户知道触发了交互 */
  opacity: 0.8;
}

小提示：去掉默认高亮后，最好给按钮加个自定义的点击状态反馈，不然用户可能不知道自己有没有点中按钮哦～

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