html - 为什么伪元素:focus on button when using TAB but not click?

Question

我正在研究表单元素的默认功能以及它们在浏览器之间的不同状态。我发现了一件很奇怪的事情。这已经在不同的浏览器中进行了测试，结果是相似的。以下屏幕截图来自 Chrome v44.0.2403.155m(64 位 Windows)。

好的，所以问题出在按钮的焦点状态上。下面您将看到一个没有 CSS 样式的默认表单。我单击第一个输入，然后使用 Tab 键向下切换表单元素。在 chrome 中，您可以将浅蓝色轮廓应用于您选择的每个元素。

请注意，当我用鼠标单击按钮时，没有淡蓝色的“焦点”状态，只有当我点击它时才会出现。

我假设这只是使用了 :focus，如果我设置了 button:focus 的样式，那么我就能够复制这个默认行为。在突出显示的按钮上按 Tab 键，单击不突出显示的按钮。看看这个样式化的表单版本...

当我单击第一个输入并按下 Tab 键时，它会执行相同的操作，显示我的自定义大纲(这很好)。但是，请注意，当我单击按钮时，它正在对其应用 :focus 状态。 这与默认行为不同。在无样式版本中，单击不会应用焦点状态。

我在按钮上使用的唯一 CSS 是...

input:focus, button:focus {
    outline: 2px solid green;
}

这是一个演示:http://jsfiddle.net/oy83s4up

如何确保单击按钮时没有轮廓，只有在选项卡时才显示轮廓？。另外，默认情况下，当一个按钮被 Tab 键聚焦时，即使点击它，轮廓仍然存在，这也是我想要复制的功能。

注意:我不是在寻找 JS 解决方法，第一个动画是浏览器中的默认行为。当然它只能用 css 复制吗？如果不是，那就是一个错误。

Answer 1

有趣的问题!

我在通过 Inspect Element 检查按钮并触发 :focus 时注意到，按钮的样式为 outline: -webkit-focus-ring-颜色自动 5px;.

虽然这不会在按钮上创建轮廓。 (这可能是因为 Mac 上的 Chrome，因为 Tab 键也不会创建轮廓)

当我将此添加到样式表单中的按钮而不是您添加的 outline 时，它不会获得您在 Tab 键浏览时获得的蓝色阴影。如果你问我，这很奇怪。当我用谷歌搜索 -webkit-focus-ring-color 时，我找到了 this question on SO .在那个答案中，他写了一些关于 [NSColor keyboardFocusIndicatorColor] 的东西，它真正谈论的是键盘焦点(在表单中切换)而不是鼠标焦点。

在 focus indicators 上谷歌搜索时，我登陆了维基百科页面 Focus (computing) , 包含以下一段文字:

By convention, the tab key is used to move the focus to the next focusable component and shift + tab to the previous one. When graphical interfaces were first introduced, many computers did not have mice, so this alternative was necessary. This feature makes it easier for people that have a hard time using a mouse to use the user interface.

这告诉我按钮上的焦点只在按下键盘时显示，因为在开始时必须显示焦点在什么元素上，而现在用鼠标就可以清楚地知道焦点在什么上，因为你是主动将鼠标移动到按钮上。