Tabindex Focus Styles

accessibility, css, html

Solution

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?

Problem

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/

Original source