按钮初始加载显示浏览器差异边框，如何禁用该选中样式？

你碰到的这个问题，本质是浏览器默认的焦点轮廓样式——不同浏览器为了保证可访问性，会给获得焦点的元素（包括按钮）添加自带的轮廓，Chrome是黑色点状、Safari是蓝色，而且有时候页面加载时按钮会自动获得焦点，就会直接显示这个轮廓。

要彻底解决这个问题，同时兼顾可访问性，你可以按以下步骤来：

1. 移除默认轮廓（核心解决视觉问题） #

直接给按钮添加CSS，移除浏览器默认的outline属性，同时可以重置border（如果你的按钮不需要默认边框的话）：

button {
  /* 移除浏览器默认的焦点轮廓 */
  outline: none;
  /* 可选：如果不需要按钮自带的边框，重置为none */
  border: none;
  /* 可选：自定义你的按钮样式，比如背景、内边距等 */
  background: #f0f0f0;
  padding: 10px 20px;
  border-radius: 6px;
  cursor: pointer;
}

2. 兼顾可访问性的优化（重要！） #

直接去掉outline会影响键盘导航的用户（比如用Tab键切换焦点的用户），所以建议给按钮添加自定义的焦点可见样式，只有当用户通过键盘聚焦时才显示，既解决视觉问题，又不破坏可访问性：

/* 仅当用户通过键盘聚焦时，显示自定义焦点样式 */
button:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
  /* 或者用box-shadow实现更柔和的效果 */
  /* box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.3); */
}

3. 处理初始自动聚焦的情况 #

如果你的按钮在页面加载时自动获得焦点（导致初始就显示轮廓），可以用下面的CSS，让非键盘触发的焦点不显示轮廓：

/* 非键盘聚焦时，隐藏轮廓 */
button:focus:not(:focus-visible) {
  outline: none;
}

这样设置后，不管是初始加载的自动焦点，还是点击按钮后的焦点，都不会显示默认的边框，只有用户用键盘导航聚焦时，才会显示你自定义的焦点样式，完美平衡视觉效果和可访问性。

内容的提问来源于stack exchange，提问作者Криси Стоянов