Hide outline focus on link when click

Question

I need to hide the focus outline when I click on a link. But i also need to show it when I slide links with tabindex. Some websites doing this with any specific workaround.It seems that is the dafault behaviour. But in my website, when I click on a link it shows also the outline. How can I show he outline only when I slide links with tabindex key? Thanks in advance. Helmut

Answer 1

If the tab behaviour is specifically what you need to detect when adjusting the CSS outline property, I don't believe CSS can ascertain the input device type from the such states as :focus or :active.

Instead, you could hide the outline for all elements on the page with CSS:

a:focus, a:active {
  outline:0;
}
a.tabbed {
  outline:1px solid red;
}

Then you'd to use JavaScript to adjust the outline for certain elements that receive focus with the tab key.

document.addEventListener('keyup', function (e) {
    var code = e.keyCode ? e.keyCode : e.which;
    var el = document.activeElement;

    if (code == 9 && el.tagName == 'A') {
        el.className = "tabbed";
    }
}, true);

I've added a quick example: http://codepen.io/anon/pen/aljsu