Tabindex Style Styles

Question

I made a tabbable div with the tabindex attribute to make hidden content available.

Currently, when you click with the mouse, the div gets the browser style :focus .

Is there a way for this tabbable to only have a focus style when accessing via keyboard? By default, this anchor element matters.

• div with tabindex='0' gets browser focus styles on mouse and keyboard interaction
• Anchor gets browser focus styles on the keyboard only

I would like the div to emulate the anchor. Making him an anchor is not an option, but unfortunately.

Any help would be great, I'm really at a loss.

Edit -> Here is an example: http://jsfiddle.net/LvXyL/2/

Answer 1

Of course, just add the: focus pseudo-class to the div and style. I recommend using the outline against the border. I updated the fiddle.

 div:focus {outline: blue solid 2px;} 

Kub suggested a JS solution, but why use js if you really don't need to?

Answer 2

If you can use javascript, try using the onclick attribute.

onclick="this.blur()" for lost focus

onclick="this.focus()" for focus focus

An example where the DIV when clicking on the lost focus and A set to focus http://jsfiddle.net/LvXyL/6/

The disadvantage is the visible focus style if you hold down the mouse button for a longer time.