Why does manual focus styling appear on mouse click and default focus styles does not?

Question

So I've noticed that if I create my own focus styles for (for example) a button, the styling will show after I've clicked the button with a mouse. But when I click a button with default focus styling, there is no outline.

However, you can perfectly tab through the buttons and both of them will show an outline when in focus.

I'm very curious of why default focus styling and my own focus styling does not function in the same way. Why does both appear on keyboard navigation, but only one of them appear on mouse click?

Please try out both clicking and navigating with keyboard on these buttons:

button {
  padding: .5rem;
  margin: 2rem;
}

.my-button:focus {
  outline: 3px solid red;
}

<button type="button">
  This button has default focus styling
</button>

<button type="button" class="my-button">
  This button has my own focus styling
</button>

PS: I'm not interested in any javascript hacky solutions, or removing the focus styling in any way. I just want to learn why the web works this way.

Adam Adam · Accepted Answer · 2017-12-12T15:28:49

Chrome uses outline-style: auto

This is defined by CSS specs as follow:

The auto value permits the user agent to render a custom outline style, typically a style which is either a user interface default for the platform, or perhaps a style that is richer than can be described in detail in CSS, e.g. a rounded edge outline with semi-translucent outer pixels that appears to glow. As such, this specification does not define how the outline-color is incorporated or used (if at all) when rendering auto style outlines. User agents may treat auto as solid.

This means that not all browsers consider that solid and auto are the same.

And you can reproduce the same behaviour as Chrome using the auto value rather than solid:

button {
  padding: .5rem;
  margin: 2rem;
}

.my-button:focus {
  outline: 3px auto red;
}

<button type="button">
  This button has default focus styling
</button>

<button type="button" class="my-button">
  This button has my own focus styling
</button>

Why does manual focus styling appear on mouse click and default focus styles does not?

2 Answers