Question

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

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

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

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

当我点击第一个输入并向下按Tab键时它会做同样的事情，我的自定义轮廓显示出来（这很好）。但是，请注意当我单击按钮时，它正在应用：焦点状态。这与默认行为不同。在未设置样式的版本中，单击不会应用焦点状态。

我在按钮上使用的唯一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-color auto 5px;。

虽然这不会在按钮上创建轮廓。（这可能是因为Mac上的Chrome，因为标签也没有创建大纲）

当我将其添加到样式表单中的按钮而不是添加的outline时，它不会获得通过标签时获得的蓝色阴影。如果你问我，这很奇怪。当我谷歌-webkit-focus-ring-color时，我来this question on SO。在那个答案中，他写了一些关于[NSColor keyboardFocusIndicatorColor]的内容，它真正谈到了键盘焦点（通过表格标签）而不是鼠标焦点。

在focus indicators上搜索一下时，我登陆了Focus (computing)的维基百科页面，其中包含以下文字：

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

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

Answer 2

我不知道它是否可能只使用css，但是使用JS，它就是。

单击按钮时不显示绿色边框，但使用选项卡聚焦按钮时<。

＆＃13;

var submit = document.getElementById("submit");

var tabbing = false;

window.onkeyup = function (e) {
    if (e.keyCode == 9) {
        tabbing = true;
    }
}

submit.onfocus = function (e) {
    if (tabbing) {
        this.classList.add("tabbed");
    }
};

submit.onblur = function () {
    this.classList.remove("tabbed");
    tabbing = false;
};

＆＃13;

#submit.tabbed:focus {
    outline: 2px solid green;
}

＆＃13;

<label>Name:</label>
<input type="text" />
<br>
<label>Pass:</label>
<input type="password" />
<br>
<label>Save Password:</label>
<input type="checkbox" />
<br>
<br>
<button id="submit">Submit</button>

＆＃13;

Answer 3

2018答案：使用:focus-visible。它目前是一个W3C提议，用于使用CSS设置仅键盘焦点的样式。在主流浏览器支持之前，您可以使用此强大的polyfill。它不需要添加额外的元素或改变tabindex。

/* Remove outline for non-keyboard :focus */
*:focus:not(.focus-visible) {
  outline: none;
}

/* Optional: Customize .focus-visible */
.focus-visible {
  outline-color: lightgreen;
}

我还写了一个更详细的post和一些演示，以防您需要更多信息。

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

3 个答案: