当您在 Chrome 浏览器中点击按钮时，通常会看到一个蓝色的轮廓或边框出现，这被称为焦点轮廓（focus outline）。这是浏览器默认的可访问性特性，用以帮助用户知道哪个页面元素当前拥有键盘焦点。然而，从视觉设计的角度来看，有时这个默认效果可能与您的网站设计不协调。
要通过自定义 CSS 来移除按钮或其他可聚焦元素上的这个蓝色边框，您可以使用 outline 属性并将其设置为 none。但是，在去掉这个边框的同时，为了保持可访问性和良好的用户体验，您应该提供一个替代的焦点指示器。这可以通过改变背景色、边框颜色或使用其他视觉效果来实现。
以下是一个简单的例子，展示了如何移除按钮的默认焦点边框，并用另一个样式替代：
button:focus { outline: none; /* 移除默认的焦点轮廓 */ border: 2px solid #FFA500; /* 提供一个明显的焦点指示器，例如橙色边框 */ box-shadow: 0 0 5px #FFA500; /* 可选，添加额外的阴影效果作为焦点指示 */ }
在实现时，我们应当谨慎考虑是否真的需要移除这个焦点轮廓，因为这对于使用键盘导航的用户来说是一个重要的可用性特性。如果决定去除，我们必须确保通过其他方式明确指出元素的焦点状态，以维护网站的无障碍性。
例如，您可能会这样实现一个按钮：
<!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 回复
