2014-01-13 10 views
14

Ich aktualisiere meine Website, um das neue HTML5 details Element für bessere Zugänglichkeit zu verwenden.Entfernen Sie blauen Rand von <details> Element in Chrome?

Es ist alles funktioniert OK, aber leider, wenn ich auf das Element zu öffnen, Chrome gilt eine hässliche blaue Grenze:

enter image description here

Gibt es eine Möglichkeit, dies zu tun Chrome stoppen kann? Ich kann keine expliziten CSS-Stile erkennen, die angewendet werden, daher bin ich mir nicht sicher, wie ich es loswerden soll.

JSFiddle Code hier, um die Demo das Problem: http://jsfiddle.net/6x2Kc/

Antwort

29

Verwenden outline:none;

So

summary{ 
    outline:none; 
} 

WORKING DEMO

Hoffnung, das hilft.

+1

Fiddle: http://jsfiddle.net/surjithctly/6x2Kc/10/ –

+7

Eigentlich Einstellung Gliederung: keine auf ** alle ** HTML-Elemente wie im Kommentar von @SurjithSM ist eine wirklich schlechte Praxis, als Benutzer, die verwenden Die Tab-Schaltfläche zum Durchblättern von Steuerelementen wird nicht sehen, was fokussiert ist. Auch behinderte Personen haben Probleme mit einer solchen Website. – RononDex

+0

Auch nur diese Antwort ist nicht gut für die Zugänglichkeit, wie wird ein Benutzer nach dem Tab durch die Seite wissen, ob Zusammenfassung konzentriert ist oder nicht? – Flimm