在 CSS 中禁用按钮轮廓

在 Web 开发中，按钮通常具有默认的轮廓效果，以便用户可以在按下按钮时获得视觉反馈。但对于一些设计和交互要求比较严格的网站，这个默认的轮廓会显得有些多余和干扰。因此需要通过 CSS 来禁用按钮轮廓。

简单方法

最简单的方法是使用 outline 属性将按钮轮廓的宽度设置为 0。示例代码如下：

button {
  outline: 0;
}

该方法也可以将 button 替换成其他需要禁用轮廓的元素。

总是显示焦点环

另一种方法是为焦点环设置一个特定的颜色，这样即使没有默认的轮廓效果，用户在选择按钮时也能够看到可见的反馈。

button:focus {
  box-shadow: 0 0 0 2px #007eff;
}

这里的 box-shadow 属性将在聚焦时显示 2 像素的蓝色边框。该方法有一个重要的优点，即使在键盘导航上被禁用的时候，这个效果也会一直存在。

禁用轮廓同时保持可访问性

禁用按钮轮廓可能会导致无障碍问题，因为依赖键盘导航的用户可能无法在需要的时候看到焦点环。为此，我们可以在失去焦点后添加样式。

button:focus,
button:hover,
button:active {
  outline: none;
}

button:not(:focus):not(:hover):not(:active):after {
  content: "";
  display: block;
  position: absolute;
  top: -5px;
  bottom: -5px;
  left: -5px;
  right: -5px;
  border: 2px solid #007eff;
  pointer-events: none;
}

在这个示例中，我们为非焦点按钮添加了一个具有 2 像素粗细的蓝色边框。变量 -5px 表示了该边框的外边距，使其与按钮显示的大小相同。由于边框超出了按钮，使用 pointer-events:none 可以防止在该区域内的任何交互事件被触发。

结论

禁用按钮轮廓可能违反无障碍要求，但在某些设计和交互要求下是必要的。可以使用众多方法中的任何一种来实现这个效果，但应该考虑到保持代码的可读性同时保持用户的可访问性。