5

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

Hel00
  • 127
  • 1
  • 10
  • what do you currently have ? Removing the outline is a simple CSS manipulation, having it at some point might be a bit trickier but doesn't look impossible. Have you read [this article](http://css-tricks.com/removing-the-dotted-outline/) yet ? – Laurent S. Jul 02 '14 at 13:28
  • Yes, I know that i can remove the outline with a css properties, but I need to SHOW it when i press the tabindex key, as also the google homepage does. – Hel00 Jul 02 '14 at 13:39

1 Answers1

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

nwinch
  • 19
  • 1