Html WCAG:Firefox和Edge-don'；应用样式时，不在聚焦的输入元素上显示大纲

我正在创建一个表单，它遵循一些WCAG准则。其中之一是：

该规则的摘要如下：

操作系统具有本地焦点指示，这在许多用户代理中都可用。焦点指示的默认呈现并不总是高度可见，甚至在某些背景下可能很难看到但是，许多平台允许用户自定义此焦点指示器的渲染。辅助技术也可以改变本机焦点指示器的外观。如果您使用本机焦点指示器，其可见性的任何系统范围设置都将保留到网页。如果您绘制自己的焦点指示器，例如根据用户操作为页面的各个部分着色，这些设置将不会保留，并且通常无法找到焦点指示器

（强调矿山）

为了遵守这条规则，我想为表单元素保留操作系统的默认焦点指示器

---

然而，我在这里面临着不同的问题

在macOS上的Firefox中：

只要I更改元素的样式（例如，通过更改边框设置），默认焦点就会丢失1

这很奇怪，因为

border

和

outline

是不同的样式属性

在Firefox和Windows上的Edge中：

浏览器在输入表单元素时显示一个焦点指示器，该指示器只是一个不同颜色的边框，只要它未设置样式即可。另一方面，Chrome确实有一个作为轮廓的指示器——就像macOS2一样

---

下面是一个演示该行为的片段（或者尝试一下）：

.b{
边框：1px纯红；
}

---

如前所述，表单元素的外观和行为是基于实现的，不同浏览器的外观和行为有所不同

每个表单元素都有其浏览器默认外观——一组样式，如

边框

，

背景

等

当您试图更改默认样式时，浏览器可能会按规则覆盖它们（就像Chrome一样），或者完全放弃默认外观（就像Firefox一样）

因此，如果您希望在“所有”浏览器中具有相同的外观，则必须显式设置它

例如：

.b{
边框：1px纯红；
-moz外观：无；
-webkit外观：无；
}
b:聚焦{
大纲：无；
盒影：0 0 2px 2px石灰
}

---

CSS

outline

属性确实存在，您可以这样使用它：

.b{
边框：1px纯红；
-moz外观：无；
-webkit外观：无；
}
输入：焦点{
外形：2倍实心#2772DB；
}

---

每个浏览器都有自己的属性。当我搜索时，您应该编写如下代码：

input.b {
  border: 1px solid #f00;
  -webkit-appearance: none;
  -moz-appearance: none;
}

input.b:focus {
  outline: none;
  box-shadow: 0 0 1px 1px #0a0;
}

如果您想了解更多有关此概念的信息，请参阅了解

---

希望，我的答案对您有所帮助。

这不是一个程序性的答案，而是如何遵守指南。这里的关键是G165是一种“技术”，而不是指南

相关指南实际上是WCAG 2.4.7（焦点可见）。您可以使用几种不同的技术来满足此指南。在这种情况下，G149、G165和G195是网页最相关的技术

那么我从哪里得到这些信息呢？从给定链接开始：

在“适用性”下有一个“如何满足2.4.7”的链接，您可以看到一些“足够的技术”，您可以从中选择这些技术来满足指南的要求。在这种情况下，由于G165和G149不能在不同的浏览器中一致工作，您可能需要“G195：使用作者提供的高度可见的焦点指示器”

---

WCAG文档一开始令人困惑，但当您退一步看看它们是如何排列的时，它就变得容易多了。他们设置了它，这样你就可以快速开始参考，当你需要阅读更多内容时，它可以链接到其他文档

图表来源

我花了一整天的时间看——它是一个可定制的快速参考，因此您可以筛选它显示的指导原则（例如，合规性级别a+AA或其他什么），根据您正在使用的技术显示哪些技术，以及许多其他内容。打开侧边栏，切换到过滤器选项卡，你就会明白我的意思。一旦你定制了书签

从该文档中，我可以查看可用的技术并点击阅读它们，还有一个指向“理解”文档相关部分的链接，我可以阅读该链接以更好地理解该指南的全部内容

---

同样对于技巧，你可能会注意到它们都以一个或几个字母开头。G为“通用”（用于任何技术），其余为过滤器部分中的“技术”。我关闭或忽略任何SL（Silverlight）、FLASH（FLASH）、SMIL（）和PDF技术，因为它们不相关。

@TylerH屏幕截图来自macOS 10.13上的Firefox 61。我在装有Windows10的PC上的Firefox上重新检查了这一点，它看起来确实不一样。似乎Firefox和Edge在Windows上根本没有显示轮廓，即使使用默认样式。也许我需要重新表述我的问题来解决这个问题。“为什么默认情况下Firefox和Windows上的Edge没有焦点指示器？”甚至在您提供的代码片段中也有。Firefox只会在键盘焦点上激活它，Edge非常微妙。如果这能解决你的问题，也许@BoltClock可以退还你的赏金？自从你发布它以来，它还没有收到任何回复，所以它似乎是那个不寻常行为的合适人选。或者，他应该发表自己的评论作为回答，并获得赏金：-P@TylerH：我的意思是，这不仅仅是Firefox和Edge显示默认焦点指示器…@lampshade仅供参考浏览器的现代版本releg