Question

为什么有些按钮会出现：点击它们时会应用焦点样式，有些则没有？例如，angular-ui modal关闭按钮已应用，但请尝试W3Schools button element，但不是。

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

当background-color的{{1}}属性与默认值不同时，按钮点击似乎会显示焦点效果。也许对于其他一些属性也是如此。

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

也许我自己回答了我的问题，也许不是，不知道。

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

更新

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

以粗体显示“已点击”，因为它仅在点击时无效。当使用键盘button键关注它时，它可以正常工作，当使用开发人员工具手动设置时，它可以正常工作。

到目前为止，大多数答案都认为点击时它会失去或完全没有焦点，但确实如此。您可以更改outline的{{1}}或tab以及其他可能的属性，当您点击它时，您会看到大纲。或者您可以将button本身更改为background规则中的其他内容，它也会显示。

Answer 1

angular-ui基于Bootstrap css框架，可以管理很多风格的小东西。

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

Answer 2

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

Answer 3

:focus伪类跟随具有focus on the page的元素。这可以是按钮，input，textarea，<a>链接或任何其他可以Tabbed到（参见：tabindex attribute）或给定的元素否则注意（触摸，鼠标点击等）。

在angular-ui示例中，点击后没有任何从对按钮中窃取焦点。然而，在W3学校，重点是警报箱被盗。因此，<button>丢失了:focus伪类。

Curioser和curioser。

似乎至少在Chrome上，background-color button:focus上的#ddd CSS属性不应该是get，以便按钮在点击后保持焦点。

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

Answer 4

发表评论后，我认为您正在查找background-color: #ddd;的按钮没有outline的原因。

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

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

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

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相关的任何内容。但它可以具有浏览器在可聚焦元素上设置的默认值。

如果您更改background-color的{{1}}，就会产生效果，就好像您点击button一样，因为两个值都不同而且它们之间存在对比他们。如果您设置相同的button，您将永远不会觉得点击了background-color。

Answer 5

：focus是pseudo-class，jQuery等工具使用它来触发事件，应用CSS样式等。查看您提供的示例，我没有看到明确的一组：focus。单击一个按钮时，jQuery会将该按钮解释为：focus。一个香草HTML按钮不会有这个。

Answer 6

我的所有AngularJs应用程序都遇到了这个问题，我通常会在点击按钮时从按钮中删除焦点，我知道这是一个黑客但它有效：D。

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

Answer 7

如果您不想在下面的代码段中使用焦点大纲，

＆＃13;

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

＆＃13;

<强> OR

＆＃13;

 :focus {outline:none;}

＆＃13;

如果你想勾勒出焦点，那就用下面的代码，

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

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

由于

更新：

通过Inspect Element检查按钮并触发a：focus时，我注意到了该按钮获得样式

＆＃13;

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

＆＃13;

但这并不会在按钮上创建轮廓。

在调试并阅读互联网上的一些页面后，我发现按钮上的焦点只显示键盘按键，因为在开始时有必要显示哪些元素是聚焦的，而现在使用鼠标它＃39 ;清楚正在关注的是什么，因为你正在积极地将鼠标移动到按钮

某些按钮具有：点击

7 个答案: