如何在 chrome 中从 css 自定义样式的按钮中删除蓝色边框

当您在 Chrome 浏览器中点击按钮时，通常会看到一个蓝色的轮廓或边框出现，这被称为焦点轮廓（focus outline）。这是浏览器默认的可访问性特性，用以帮助用户知道哪个页面元素当前拥有键盘焦点。然而，从视觉设计的角度来看，有时这个默认效果可能与您的网站设计不协调。

要通过自定义 CSS 来移除按钮或其他可聚焦元素上的这个蓝色边框，您可以使用 outline 属性并将其设置为 none。但是，在去掉这个边框的同时，为了保持可访问性和良好的用户体验，您应该提供一个替代的焦点指示器。这可以通过改变背景色、边框颜色或使用其他视觉效果来实现。

以下是一个简单的例子，展示了如何移除按钮的默认焦点边框，并用另一个样式替代：

css
button:focus {
  outline: none; /* 移除默认的焦点轮廓 */
  border: 2px solid #FFA500; /* 提供一个明显的焦点指示器，例如橙色边框 */
  box-shadow: 0 0 5px #FFA500; /* 可选，添加额外的阴影效果作为焦点指示 */
}

在实现时，我们应当谨慎考虑是否真的需要移除这个焦点轮廓，因为这对于使用键盘导航的用户来说是一个重要的可用性特性。如果决定去除，我们必须确保通过其他方式明确指出元素的焦点状态，以维护网站的无障碍性。

例如，您可能会这样实现一个按钮：

html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>自定义按钮样式</title>
<style>
button {
  padding: 10px 20px;
  background-color: #1E90FF;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

/* 当按钮被聚焦时，改变背景色和边框 */
button:focus {
  outline: none;
  border: 2px solid #FFA500;
  background-color: #187bcd;
}
</style>
</head>
<body>

<button type="button">点击我</button>

</body>
</html>

在此例中，当按钮获得焦点时，除了移除默认的蓝色边框之外，按钮的背景色也会变暗，并且会增加一个橙色的边框，以此来区分焦点状态。这确保了即使在去除了默认的焦点轮廓后，用户依然能够通过颜色变化识别哪个元素是当前聚焦的，从而保持良好的用户体验和可访问性。

2024年6月29日 12:07 回复

在我遇到这个问题的例子中，我必须指定box-shadow: none

shell
button:focus {
  outline:none;
  box-shadow: none;
}

2024年6月29日 12:07 回复

我只是通过选择全部并将大纲：无应用于所有内容，从页面中的所有标签中删除大纲:)

shell
*:focus {outline:none}

正如 bagofcole 提到的，您可能还需要添加 !important，因此样式将如下所示：

shell
*:focus {outline:none !important}

2024年6月29日 12:07 回复

3个答案

你的答案