CSS Cross-Browser Outline Supresión en el clic

Question

Tengo una estructura de menú que se ve así:

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;
}

He estado intentando durante muchos días encontrar una solución de navegador cruzado para suprimir el estilo de esquema al hacer clic mientras lo mantenía habilitado con la navegación de pestañas.

Ninguna de las soluciones escritas en las siguientes páginas está funcionando para mí:http://people.opera.com/patrickl/experiments/keyboard/testhttp://haslayout.net/css-tuts/removing-doted-border-on-clicked-links

¿Alguien sabe cómo solucionar este problema? Cualquier solución (solo CSS, JS, CSS+JS) es bienvenida. ¡Muchas gracias de antemano!

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

Answer 1

Tienes que usar Javascript, para que puedas diferenciar entre teclado y ratón Disparadores del evento.

Parte de la respuesta para su pregunta ya se publicó en Diferenciar entre el evento de enfoque activado por teclado/mouse

Y aquí está la solución completa usando el jQuery Marco JavaScript:

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);

Luego solo defina el estilo deseado en el a.keyboard o a.mouse CSS clases.

Answer 2

CSS:

a:active {
    outline:0 !important;
}