为什么我的自定义按钮在 Chrome 中具有蓝色边框，如何在保持可访问性的同时删除它？-css教程-PHP中文网

为什么我的自定义按钮在 Chrome 中具有蓝色边框，如何在保持可访问性的同时删除它？

Barbara Streisand

发布： 2024-12-17 21:15:13

原创

795 人浏览过

Why Does My Custom Button Have a Blue Border in Chrome, and How Can I Remove It While Maintaining Accessibility?

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

对于具有自定义设计的网站，开发人员通常选择将

重新定义焦点状态

有问题的蓝色边框是浏览器的默认焦点状态。要删除它，可以修改轮廓等焦点状态属性：

button:focus {
  outline: 0;
}

登录后复制

通过将轮廓属性设置为 0，焦点状态边框将被有效禁用。

删除辅助功能回归警告

需要注意的是，通过设置 Outline: 0 来移除焦点状态可能会妨碍依赖焦点等视觉提示的用户的可访问性

为了获得更好的可访问性，建议使用以下 CSS：

button:focus {
  outline: none;
}

登录后复制

此修改删除了默认的轮廓样式并保留了可访问性。

示例

在提供的CSS中，添加了button:focus规则：

button.launch {
  background-color: #F9A300;
  border: none;
  height: 40px;
  padding: 5px 15px;
  color: #ffffff;
  font-size: 16px;
  font-weight: 300;
  margin-top: 10px;
  margin-right: 10px;
}

button.launch:hover {
  cursor: pointer;
  background-color: #FABD44;
}

button.change {
  background-color: #F88F00;
  border: none;
  height: 40px;
  padding: 5px 15px;
  color: #ffffff;
  font-size: 16px;
  font-weight: 300;
  margin-top: 10px;
  margin-right: 10px;
}

button.change:hover {
  cursor: pointer;
  background-color: #F89900;
}

/* Remove annoying Chrome blue focus border */
button:focus {
  outline: none;
}

登录后复制

这确保了Chrome 中的蓝色边框被删除，同时保持适当的可访问性。

以上是为什么我的自定义按钮在 Chrome 中具有蓝色边框，如何在保持可访问性的同时删除它？的详细内容。更多信息请关注PHP中文网其他相关文章！