如何阻止浏览器自动高亮点击后的按钮？自定义HTML按钮问题

嘿，这个问题我太熟了！Chrome这类现代浏览器默认会给获得焦点的按钮添加一个高亮轮廓，确实会破坏你自定义按钮的视觉效果。下面分享几种实用的解决方法，你可以根据需求选择：

方法1：直接移除焦点状态的outline（简单但注意可访问性） #

最直接的方式是通过CSS去掉按钮:focus状态下的默认轮廓：

button:focus {
  outline: none;
}

⚠️ 注意：直接去掉outline会影响键盘导航用户的体验——他们无法直观看到当前焦点在哪里。所以建议同时添加自定义的焦点样式，比如：

button:focus {
  outline: none;
  /* 自定义焦点样式，比如蓝色阴影 */
  box-shadow: 0 0 0 2px #4d90fe;
  /* 或者改变背景色 */
  background-color: #f5f5f5;
}

方法2：使用:focus-visible伪类（兼顾样式与可访问性，推荐） #

这是现代浏览器支持的更智能的方案：只有当用户通过键盘（比如Tab键）导航到按钮时，才显示焦点样式；鼠标点击时则自动隐藏高亮，完美平衡了视觉效果和可访问性：

/* 鼠标点击时不显示默认outline */
button:focus:not(:focus-visible) {
  outline: none;
}

/* 键盘导航时的自定义焦点样式 */
button:focus-visible {
  outline: 2px solid #4d90fe;
  outline-offset: 2px; /* 让轮廓和按钮保持一点距离 */
}

方法3：禁用文本选择（辅助优化） #

如果你的按钮上有文本，有时候用户点击或拖动时会出现文本高亮，这可以通过user-select属性禁用：

button {
  user-select: none;
  -webkit-user-select: none; /* 兼容Chrome/Safari */
}

这个方法主要针对文本高亮，和按钮的焦点高亮是两回事，但搭配前面的方法能让按钮的交互体验更统一。

小提示 #

尽量避免用JavaScript阻止默认行为来解决这个问题，不仅没必要，还可能影响按钮的其他原生功能（比如表单提交）。CSS方案是最简洁可靠的。

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