CSS Cross-Browser-Umriss-Unterdrückung beim Klick

Question

Ich habe eine Menüstruktur, die so aussieht:

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

Ich habe viele, viele Tage versucht, eine Cross-Browser-Lösung zu finden, um den Umrissstil beim Klicken zu unterdrücken, während sie mit der Tabulatnavigation aktiviert bleibt.

Keine der auf den folgenden Seiten geschriebenen Lösungen arbeitet für mich:http://people.opera.com/patrickl/experiments/keyboard/testhttp://haslayout.net/css-tuts/removing-dotted-border-on-clicked-links

Weiß jemand, wie man dieses Problem behebt? Jede Lösung (nur CSS, JS, CSS+JS) ist willkommen. Vielen Dank im Voraus!

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

Answer 1

Sie müssen verwenden JavaScript, damit Sie zwischen unterscheiden können Klaviatur und Maus Ereignisauslöser.

Ein Teil der Antwort auf Ihre Frage war bereits in der Veröffentlichung Differenzieren Sie zwischen dem Fokusereignis, das durch Tastatur/Maus ausgelöst wird

Und hier ist die vollständige Lösung mit der 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);

Definieren Sie danach einfach den gewünschten Stil in der a.keyboard oder a.mouse CSS Klassen.

Answer 2

CSS:

a:active {
    outline:0 !important;
}