CSS Cross-Browser Outline Suppression On Click

Question

I have a menu structure that looks like this:

HTML:

<li>
  <a href="#page">
    <b>Recover Account</b>
  </a>
</li>

CSS:

#nav ul li a
{
  color: #889DBF;
  display: block;
  line-height: 22px;
  padding-left: 20px;
  text-decoration: none;
}

#nav ul li a b
{
  display: block;
  padding-right: 21px;
}

#nav ul li.current a
{
  background: url('/images/nav-left.png') no-repeat;
  color: #111B35;
}

#nav ul li.current a b
{
  background: url('/images/nav-right.png') no-repeat 100% 0;
  color: #111B35;
}

I've been trying for many many days to find a cross-browser solution to suppress outline style on click while keeping it enabled with tab navigation.

None of the solutions written on the following pages are working for me: http://people.opera.com/patrickl/experiments/keyboard/test http://haslayout.net/css-tuts/Removing-Dotted-Border-on-Clicked-Links

Does anyone know how to fix this issue? Any solution (CSS only, JS, CSS+JS) is welcome. Many thanks in advance!

[TL;DR]
Outline On Click -> DISABLED
Outline On Tab Navigation -> ENABLED
Any cross-browser solution? Thanks!

AlienWebguy · Answer 1 · 2011-07-24T04:05:16.733

1

CSS:

a:active {
    outline:0 !important;
}

edited Jul 24 '11 at 04:05

answered Jul 24 '11 at 03:58

AlienWebguy

76,997
17
122
145

But the poster specified he wants the outline to remain for keyboard based navigation. That suppresses it on both keyboard and clicks. I'd personally just do `:active`. – Will Martin Jul 24 '11 at 04:00
Ah I misread the TL;DR. I thought it was being enabled on focus and that wasn't the desired result :) – AlienWebguy Jul 24 '11 at 04:05
Right guys, I would like to keep it for tab based navigation! – Tommaso Belluzzo Jul 24 '11 at 04:21
Cool if this worked for you, please click the check mark next to my answer :) Thanks! – AlienWebguy Jul 24 '11 at 04:27

score 1 · Accepted Answer · edited May 23 '17 at 09:58

You have to use JavaScript, so that you can differentiate between keyboard and mouse event triggers.

Part of the answer for your question was already posted in Differentiate between focus event triggered by keyboard/mouse

And here is the complete solution using the jQuery javascript framework:

var isClick;
$(document).bind('click', function() { isClick = true; })
           .bind('keypress', function() { isClick = false; })
           ;
var userInterestHandlers = {
     on: function (e) {
        var $self = $(this);
        var classname =isClick ? 'mouse' : 'keyboard';
        $self.addClass(classname);
    }
    off: function (e) {
        var $self = $(this);
        $self.removeClass('mouse keyboard');
    }
}

$('a').bind ('focus active', userInterestHandlers.on);
$('a').bind ('blur', userInterestHandlers.off);

Afterwards just define the desired style in the a.keyboard or a.mouse CSS classes.

This solution is partially working for me only with Chrome. What is the active event? I cannot find it on jQuery documentation. — Tommaso Belluzzo, Jul 24 '11 at 21:50
@Zarathos active is initially to do with CSS. It is the state of an anchor/link when it's pressed down, clicked down, touched down.. — antitoxic, Feb 10 '12 at 09:01

CSS Cross-Browser Outline Suppression On Click

2 Answers2