为什么是伪元素:在使用TAB但不点击时关注按钮？

Question

我正在研究表单元素的默认功能以及它们在浏览器之间的不同状态.我觉得很奇怪.这已在不同的浏览器中测试过,结果相似.以下屏幕截图来自Chrome v44.0.2403.155m(64位Windows).

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

请注意,当我用鼠标点击按钮时,没有浅蓝色的"焦点"状态,只有在我选中它时才会发生.

我假设这只是使用:焦点,如果我设置了按钮:焦点,那么我将能够复制此默认行为.选中它突出显示的按钮,点击它没有的按钮.看看这个风格版的表格......

当我点击第一个输入并按下它时它会做同样的事情,我的自定义轮廓显示(这很好).但是,请注意当我单击按钮时,它正在应用:焦点状态.这与默认行为不同.在未设置样式的版本中,单击不应用焦点状态.

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

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

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

单击按钮时,如何确保没有轮廓,只有当它有标签时？.此外,默认情况下,当按钮使用Tab键聚焦时,即使单击该按钮,轮廓仍然保留,这也是我想要复制的功能.

注意:我不是在寻找JS工作,第一个动画是浏览器中的默认行为.当然它只能用css复制？如果没有,那就是一个bug.

Answer 1

有趣的问题!

在检查按钮Inspect Element并触发a 时我注意到的是:focus,按钮获得了样式outline: -webkit-focus-ring-color auto 5px;.

但这并不会在按钮上创建轮廓.(这可能是因为Mac上的Chrome,因为标签也没有创建大纲)

当我将它添加到样式表单中的按钮而不是添加时outline,它不会得到你在标签时得到的蓝色阴影.如果你问我,这很奇怪.当我谷歌时-webkit-focus-ring-color,我就这样提出了这个问题.在那个答案中,他写了一些关于[NSColor keyboardFocusIndicatorColor]键盘焦点(通过表格的标签)而不是鼠标焦点的内容.

谷歌搜索时focus indicators,我登陆维基百科页面聚焦(计算),包含以下文本:

按照惯例,tab键用于将焦点移动到下一个可聚焦组件,并将+ tab移动到前一个组件.当首次引入图形界面时,许多计算机都没有鼠标,因此这种替代方案是必要的.此功能使使用鼠标的人很难使用用户界面.

这告诉我,按钮上的焦点只显示键盘按下,因为在开始时有必要显示关注的元素,而现在用鼠标可以清楚地关注什么,因为你正在积极地移动鼠标到按钮.