Focus border not appearing on html button or select in Google Chrome (Only OSX 10.10.3)

Question

TL;DR Why doesn't the default focus highlight appear on buttons and select dropdowns in Google Chrome on OSX 10.10.3?

This only seems to be a problem in Google Chrome. First, have a look at the example here: 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. If you click inside of the input box you can set and see the focus is set.
2. If you tab forwards focus is set on the button however the outline css doesn't appear.
3. The focus on the second button works but looks strange due to my custom styling.
4. The focus on the selector also works and you can change the value using the arrow keys. However, there is no indication of focus.
5. You'll also notice (in the plnkr demo) that if you add the tabindex to the header you can also see the highlight for that too.

Problem

You can set the focus on all of these input types however the focus doesn't show up in chrome.

Goal

I'm trying to have the sort of focus styling that you see on the adjacent inputs. I was looking through the CSS that Bootstrap buttons use but couldn't figure it out.

Specs

• Browser: Chrome Version 43.0.2357.124 (64-bit)
• OS: OSX Yosemite V10.10.3

Update

This problem seems to be exclusively on OSX 10.10.3 (I've tested and confirmed on two different computers). With the newest version of Chrome on OSX 10.9.4 this is not a problem.

Answer 1

You can add border: 0 to your .buttonWithFocusCustom:focus class. But that changes the entire appearance of the button so you'll also have to restyle that. I thought all form elements with a tabindex, by default or by specifying, had default browser styling for focused elements.