Why pseudo element :focus on button when using TAB but not click?

Question

I was looking into the default functionality of form elements and what different states they have between browsers. I found something quite strange. This has been tested in different browsers and the results are similar. The screenshots below are from Chrome v44.0.2403.155m (64-bit Windows).

Ok, so the problem is with focus states of buttons. Below you will see a default form with no css styling. I click on the first input and then use the Tab Key to tab down the form elements. In chrome you get a light blue outline applied to every element you tab onto.

Notice that when I click on the button with the mouse there is no light blue "focus" state it only happens when I tab onto it.

I presumed this was just using :focus, and if I styled button:focus then I would be able to replicate this default behavior. Tab onto a button it highlights, click on a button it does not. Have a look at this styled version of the form...

When I click on the first input and tab down it does the same thing, my custom outline is shown (this is fine). However, notice when I click on the button, it is applying the :focus state to it. This is not the same as the default behavior. In the un-styled version, a click does not apply a focus state.

The only CSS I am using on the button is...

input:focus, button:focus {
    outline: 2px solid green;
}

Here is a demo: http://jsfiddle.net/oy83s4up

How do I make sure there is no outline when the button is clicked, only when it is tabbed?. Also, by default when a button is focused with the tab key, even when it is clicked, the outline still remains, this is also functionality I want to replicate.

Note: I am not looking for a JS work around, The first animation is default behavior in the browser. Surely it can replicated with css only? If not, then it is a bug.

Answer 1

Interesting question!

What I noticed when inspecting the button through Inspect Element and triggering a :focus, the button gets the style outline: -webkit-focus-ring-color auto 5px;.

This does not create an outline on the button though. (This could be because of Chrome on Mac, since tabbing doesn't create an outline either)

When I add this to the button in the styled form instead of your added outline, it doesn't get the blue dropshadow you get when tabbing through. This weird if you ask me. When I google -webkit-focus-ring-color, I come to this question on SO. In that answer, he writes something about [NSColor keyboardFocusIndicatorColor], which really talks about keyboard focus (tabbing through the form) and not mouse focus.

When googling a bit on focus indicators, I landed on the Wikipedia-page for Focus (computing), containing the following piece of text:

By convention, the tab key is used to move the focus to the next focusable component and shift + tab to the previous one. When graphical interfaces were first introduced, many computers did not have mice, so this alternative was necessary. This feature makes it easier for people that have a hard time using a mouse to use the user interface.

This tells me that the focus on button only shows up with a keyboard press, because in the beginning it was necessary to show what element is focused on, while now with a mouse it's clear what is being focused on, since you are actively moving the mouse to the button.

Answer 2

I don't know if it's possible using only css, but with JS, it is.

Green border is not shown when clicked on the button, but when the button is focused with tab.

var submit = document.getElementById("submit");

var tabbing = false;

window.onkeyup = function (e) {
    if (e.keyCode == 9) {
        tabbing = true;
    }
}

submit.onfocus = function (e) {
    if (tabbing) {
        this.classList.add("tabbed");
    }
};

submit.onblur = function () {
    this.classList.remove("tabbed");
    tabbing = false;
};

#submit.tabbed:focus {
    outline: 2px solid green;
}

<label>Name:</label>
<input type="text" />
<br>
<label>Pass:</label>
<input type="password" />
<br>
<label>Save Password:</label>
<input type="checkbox" />
<br>
<br>
<button id="submit">Submit</button>

Answer 3

2018 Answer: Use :focus-visible. It's currently a W3C proposal for styling keyboard-only focus using CSS. Until major browsers support it, you can use this robust polyfill. It doesn't require adding extra elements or altering the tabindex.

/* Remove outline for non-keyboard :focus */
*:focus:not(.focus-visible) {
  outline: none;
}

/* Optional: Customize .focus-visible */
.focus-visible {
  outline-color: lightgreen;
}

I also wrote a more detailed post with some demo just in case you need more info.