Tabindex Focus Styles - html

Question

I have made a div tabbable with the tabindex attribute to make hidden content accessible.
Currently when clicked with the mouse the div gets browser :focus styling.
Is there a way to have that tabbable element to only have focus styling when accessed via the keyboard? An anchor element has this by default.
Div with tabindex='0' gets browser focus styles on mouse and keyboard
interaction
Anchor gets browser focus styles on keyboard interaction
only
I would like the div to emulate the anchor. Making it an anchor is not an option though unfortunately.
Any help would be great, I'm genuinely at a loss.
Edit -> Here is an example: http://jsfiddle.net/LvXyL/2/

Answer 1

Sure just add the :focus pseudo-class to the div, and style. I recommend using outline vs border. I updated the fiddle.
div:focus {outline: blue solid 2px;}
Kub suggested a JS solution, but why use js if you don't actually need to?

Answer 2

I've had great success using javascript to add/remove a class to the body that indicates if the user is using a mouse or a keyboard. Use those classes to style your focus states as you desire.
document.addEventListener("mousedown", () => {
document.body.classList.add("using-mouse")
document.body.classList.remove("using-keyboard")
})
document.addEventListener("keydown", () => {
document.body.classList.add("using-keyboard")
document.body.classList.remove("using-mouse")
})
The in the css you can do something like:
.using-mouse :focus {
outline: none;
}
.using-keyboard :focus {
outline: auto 5px blue;
}

Answer 3

I would suggest to don't be specific on tags like div, p, span
let's write one common selector to achieve this functionality for all the elements.
*:focus {
outline: blue solid 2px;
}
If you want to be specific then I would suggest this one.
*[tabindex]:focus {
outline: 2px green solid;
}

Answer 4

I have used the focus-visible css selector to apply different styles for keyboard focus and mouse click.
The way I implemented it is like this:
.your-element's-classname:focus:not(:focus-visible) { outline: none; }
When you focus it with the keyboard you will see the browser's focus styling or the custom styling you have made for your element, and when you click it you will see no styling because I have applied outline:none which removes the outline created by the browser's focus styling.
You can find more information in Mozilla's focus-visible docs and Chromium's browser focus article.

Answer 5

For those who are looking to override the tabindex focus style and preserve the original functionality of tabindex ie. show outline only when tab key is pressed and not on mouse click like if
:focus {
outline: 2px solid lime;
}
is used it will show outline on every element that is getting focus, but I found out that if I use
Change Tabindex Style - for all elements:
:focus-visible {
outline: 2px solid lime;
}
this will override the outline style of the tabindex on focus and preserve the tab outline functionality but with the new outline style.
https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible

Answer 6

If you can use javascript, try use onclick attribute.
onclick="this.blur()" for lost focus
onclick="this.focus()" for set focus
Example where DIV on click lost focus and A is set focus http://jsfiddle.net/LvXyL/6/
Disadvantage is visible focus style if you hold mouse key for a longer time.