Entfernen Blaue Grenze vom öffnen <details> - element in Chrom?

Ich bin Aktualisierung meiner Website für die Verwendung der neuen HTML5 - details element für bessere Zugänglichkeit.

Alles funktioniert OK, aber leider wenn ich auf öffnen Sie das element, Chrom gilt ein hässlicher blauer Rand:

Entfernen Blaue Grenze vom öffnen <details> - element in Chrom?

Gibt es eine Möglichkeit, ich kann aufhören, Chrome, dies zu tun? Ich sehe keine explizite CSS-Stile angewendet werden, so bin ich nicht sicher, wie Sie Sie loswerden.

JSFiddle code hier, um die demo-problem: http://jsfiddle.net/6x2Kc/

InformationsquelleAutor flossfan | 2014-01-13
  1. 40

    Verwenden outline:none;

    Zum Beispiel,

    summary{
  outline:none;
}

    ARBEITEN DEMO

    Hoffe, das hilft.

    • Fiddle: jsfiddle.net/surjithctly/6x2Kc/10
    • Eigentlich Einstellung outline:none auf alle - HTML-Elemente wie in dem Kommentar von @SurjithSM ist eine sehr schlechte Praxis, wie Benutzer mit der tab-Taste zur Registerkarte durch Kontrollen nicht sehen, was fokussiert ist. Auch Behinderte haben Probleme mit einer solchen website hat.
    • Selbst diese Antwort ist nicht gut für die Barrierefreiheit, wie soll ein Benutzer wissen, dass nach der Navigation mit der Tabulatortaste durch die Seite, ob die Zusammenfassung konzentriert oder nicht?
    InformationsquelleAutor Nitesh
  2. 1

    Verwenden outline: 0;

    summary:focus {
     outline: 0;
}
    InformationsquelleAutor Peratchi Selvam
Schreibe einen Kommentar