在 Safari 中可见焦点

Safari 是苹果公司的网页浏览器，它具有许多优秀的功能，其中之一是可见焦点。可见焦点使用户可以在页面上看到当前获取焦点的元素，例如文本框或按钮。这个功能对于辅助功能用户来说尤为重要，因为它可以帮助他们更容易地与页面交互。

在 Safari 中，可见焦点由一条黄色的轮廓框表示。该框架会出现在获得焦点的元素周围，例如文本框或按钮。这使得更容易确定哪个元素当前处于焦点状态，并且随着用户将焦点移动到不同的元素上，该框架也会相应地移动。

为了在 Safari 中启用可见焦点，您需要将以下样式添加到您的 CSS 中：

*:focus {
  outline: 2px solid yellow !important;
}

这将为所有元素添加黄色框，并且当该元素处于焦点状态时，该框将变得可见。请注意，这将适用于所有元素，包括链接和图像。如果您只想在表单元素上启用可见焦点，则可以使用以下代码：

input:focus,
select:focus,
textarea:focus,
button:focus {
  outline: 2px solid yellow !important;
}

这将只在文本框、下拉框、文本域和按钮处启用焦点可见性。请注意，因为 !important 标志，这个样式将优先于任何其他样式，并且可能会覆盖其他设置。

在 Safari 中启用可见焦点非常容易，并且可以大大改善您的页面的可访问性。确保您的页面上的每个元素都受到可见焦点的支持，以提高辅助功能用户的体验。

参考链接

• Safari 开发文档 - 可见焦点