css - 焦点边框未出现在 html 按钮上或在 Google Chrome 中选择(仅限 OSX 10.10.3)

Question

TL;DR 为什么在 OSX 10.10.3 上的 Google Chrome 中，按钮和选择下拉菜单中的默认焦点突出显示不显示？

这似乎只是 Google Chrome 中的一个问题。 首先，看看这里的例子: http://plnkr.co/edit/utBv5Nmn1nqjQxAODG6X?p=preview

<style>
  .buttonWithFocusCustom:focus{
    outline-color: -webkit-focus-ring-color;
    outline-style: solid;
    outline-width: 2px;
  }
</style>

<input type="number" min="1" max="20" required="" tabindex="0" aria-required="false">
<button type="button" onclick="alert('See?! Focus was set on this button but no focus ring!')" tabindex="0">Why don't I have a focus ring?</button>
<button type="button" class="buttonWithFocusCustom" onclick="alert('Hello world!')" tabindex="0">How do I make this a ring instead of a square?</button>
<select tabindex="0">
  <option value="0" selected="selected" label="25">25</option>
  <option value="1" label="50">50</option>
  <option value="2" label="75">75</option>
  <option value="3" label="100">100</option>
</select>

1. 如果您在输入框内单击，您可以设置并看到焦点已设置。
2. 如果您将焦点设置在按钮上，但不会显示大纲 css。
3. 第二个按钮上的焦点有效，但由于我的自定义样式看起来很奇怪。
4. 选择器上的焦点也有效，您可以使用箭头键更改值。但是，没有焦点的迹象。
5. 您还会注意到(在 plnkr 演示中)如果您将 tabindex 添加到 header ，您也可以看到它的突出显示。

问题

您可以将焦点设置在所有这些输入类型上，但焦点不会显示在 chrome 中。

目标

我正在尝试使用您在相邻输入上看到的那种焦点样式。我正在查看 Bootstrap buttons 的 CSS使用但无法弄清楚。

规范

• 浏览器:Chrome 版本 43.0.2357.124(64 位)
• 操作系统:OSX Yosemite V10.10.3

更新

这个问题似乎只出现在 OSX 10.10.3 上(我已经在两台不同的计算机上测试并确认)。 使用 OSX 10.9.4 上的最新版 Chrome，这不是问题。

Answer 1

您可以将 border: 0 添加到您的 .buttonWithFocusCustom:focus 类中。但这会改变按钮的整体外观，因此您还必须重新设计它的样式。我认为所有带有 tabindex 的表单元素，默认情况下或通过指定，都具有焦点元素的默认浏览器样式。