Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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.

enter image description here

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...

enter image description here

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.

like image 933
Bruffstar Avatar asked Aug 17 '15 08:08

Bruffstar


People also ask

How do I stop my tab from focusing?

To prevent tab indexing on specific elements, you can use tabindex="-1". If the value is negative, the user agent will set the tabindex focus flag of the element, but the element should not be reachable with sequential focus navigation. Note that this is an HTML5 feature and may not work with old browsers.

What is the pseudo-class focus?

The :focus CSS pseudo-class represents an element (such as a form input) that has received focus. It is generally triggered when the user clicks or taps on an element or selects it with the keyboard's Tab key.

How do you focus on tabs?

Insert an element into the tab order # To focus an element, press the Tab key or call the element's focus() method.

How does focus-visible work?

The :focus-visible pseudo-class applies while an element matches the :focus pseudo-class and the UA (User Agent) determines via heuristics that the focus should be made evident on the element. (Many browsers show a "focus ring" by default in this case.)


2 Answers

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;.

enter image description here

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)

enter image description here

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.

like image 86
Rvervuurt Avatar answered Oct 18 '22 08:10

Rvervuurt


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>
like image 25
akinuri Avatar answered Oct 18 '22 09:10

akinuri