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!

Answer 1

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.