焦点边框未出现在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添加到标题中，您也可以看到它的亮点。

问题

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

目标

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

功能

• 浏览器：Chrome版本43.0.2357.124（64位）
• OS：OSX Yosemite V10.10.3

更新

这个问题似乎完全在OSX 10.10.3上（我在两台不同的计算机上测试过并确认过）。 使用OSX 10.9.4上最新版本的Chrome，这不是问题。

Answer 1

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