一些按钮在点击时应用了 :focus 样式

Question

为什么有些按钮在点击时会应用 :focus 样式而有些则不会？例如，angular-ui modal 关闭按钮已应用，但尝试 W3Schools button element 并没有。

编辑：我重新提出这个问题。对不起，我忘记了一点，因为我真的坚持它已经解决了，直到昨天我才真正尝试过。所以我做了这样的事情：.btn:focus:not(:active) { outline: none;}，但问题是使用tab 按钮时它也没有显示焦点。完全忘记引导程序，不是它！

当:focus 的background-color 属性与默认值不同时，焦点效果似乎在按钮单击时变得可见。可能对其他一些属性也是如此。

所以 - 如果 background 是默认值，那么只有在使用 tab 键或手动将其设置为 :focus 时才能看到焦点效果。如果background 不同，点击后也能看到效果。 Plunker 演示了这一点：https://plnkr.co/edit/2eKrtwl2wZcj3Ty4JJSu?p=preview

也许我自己已经回答了我的问题，也许没有，不知道。

edit2：刚刚看到@musically_ut 编辑给出了几乎相同的示例。

更新

在与@Error404 讨论后，我可以更准确地澄清这个问题。 所以问题是 - 为什么默认 button 的 outline 样式在被点击时没有显示？

以粗体显示“点击”，因为它不仅仅在点击时起作用。使用键盘tab 键聚焦时有效，使用开发者工具手动设置时有效。

到目前为止，大多数答案都认为单击时它会失去焦点或根本没有焦点，但确实如此。您可以更改button 的background 或border 以及可能还有其他一些属性，突然，当您单击它时，您会看到轮廓。或者您可以将outline 本身更改为:focus 规则中的其他内容，它也会显示。

Answer 1

angular-ui 基于 Bootstrap css 框架，可管理许多小东西的样式。

W3C 示例只是没有应用任何样式的 html。

Answer 2

angular-ui modal 可能有额外的 CSS 来创建 :focus 选择器行为，而 W3 学校没有。

Answer 3

:focus 伪类跟随具有focus on the page 的元素。这可以是一个按钮，或一个input、textarea、<a> 链接或任何其他可以Tabbed 到的元素（请参阅：tabindex attribute）或以其他方式获得焦点（触摸、鼠标单击等） .).

在angular-ui 示例中，没有任何东西窃取点击后按钮的焦点。然而，在 W3-school 上，焦点被警报框偷走了。因此，<button> 失去了 :focus 伪类。

---

Curioser 和 Curioser。

看来，至少在 Chrome 上，button:focus 上的 background-color CSS 属性应该是 #ddd 以外的其他内容，以便按钮在单击后保持焦点。

演示：http://codepen.io/musically_ut/pen/eZjWeq

Answer 4

在您的 cmets 之后，我想您正在寻找带有 background-color: #ddd; 的按钮没有 outline 的原因。

button.buttontag:focus {
  background-color: #ddd;
}

<button class="buttontag" type="button">Focus me</button>

我认为这里的主要原因是，这不是您正在寻找的 outline，因为如果您在具有不同 background-color 的 button 上禁用它，焦点效果仍然会出现。

button.buttontag:focus {
  background-color: #dde;
  outline: none; /* I also proved with 0 */
  -webkit-box-shadow: none;
}

<button class="buttontag" type="button">Focus me</button>

它似乎是一个特殊的边框，因为如果你设置另一个边框是唯一的方法，这个焦点的特殊边框会消失。

button.buttontag:focus {
  background-color: #dde;
  outline: 0;
  -webkit-box-shadow: none;
  border: 1px solid orange;
}

<button class="buttontag" type="button">Focus me</button>

我很好奇为什么会发生这种情况，也许#ddd 是默认的特殊边框颜色是我想到的主要问题。所以让我们知道边框颜色有什么。

var buttontag = document.getElementById('buttontag');
buttontag.onfocus = function(){
  var border = window.getComputedStyle(buttontag).getPropertyValue("border");
  alert(border);
}

var border = window.getComputedStyle(buttontag).getPropertyValue("border");
alert(border);

button {}
:focus {background-color: #ddd }

<button id="buttontag" type="button">Focus me</button>

不管它是否在焦点上，它的边框上总是有颜色rgb(221, 221, 221)，相当于十六进制的#DDDDDD，与#ddd相同。

我们有它！： 这个button 在它有background-color: #ddd; 时似乎没有成为焦点的原因是因为它有相同的border colour 和background-color 所以它们之间没有任何对比（background-color 和 border）。

记住： onfocus 事件只检测focus 事件何时在button（或其他可聚焦元素）上触发。它与CSS 没有任何关系，它只是获取事件，但与CSS 没有任何关系。不过，它可以具有浏览器在可聚焦元素上设置的默认值。

这就是为什么如果您更改button 的background-color 会产生好像您单击了button 的效果，因为这两个值不同并且它们之间形成对比。如果您设置相同的background-color，您将永远不会感觉到button 正在被点击。

Answer 5

:focus 是一个pseudo-class，它被 jQuery 等工具用于触发事件、应用 CSS 样式等。查看您提供的示例，我没有看到一组明确的 :focus。单击按钮时，jQuery 会将按钮解释为 ​​:focus。普通的 HTML 按钮不会有这个。

Answer 6

我的所有 AngularJs 应用程序都有这个问题，我通常会在单击按钮时从按钮上移除焦点，我知道这是一个 hack，但它可以工作：D。

$('.btn').click(function(){
    $(this).blur();
});

Answer 7

如果您不想在下面的代码中显示焦点轮廓，

<button type="button" tabindex="-1">Click Me!</button>

或

 :focus {outline:none;}

如果你想勾勒出焦点然后使用下面的代码，

 :focus {outline: 1px solid #5B9DD9}

您可以随意使用其他样式（如背景或边框等）。 我希望这会有所帮助，如果您有疑问，请告诉我。

谢谢

更新：

我在通过 Inspect Element 检查按钮并触发 :focus 时注意到的，按钮获得了样式

:focus { outline: -webkit-focus-ring-color auto 5px; } 

不过，这不会在按钮上创建轮廓。

在调试和阅读互联网上的一些页面后，我知道按钮的焦点只显示在按下键盘时，因为一开始有必要显示关注的元素，而现在用鼠标很清楚什么正在被关注，因为您正在积极地将鼠标移动到按钮上