2010-09-07 4 views
37

Ich benutze Mac OS, damit ich nicht wirklich sagen kann, ob dieser Effekt auf Windows-Rechnern angezeigt wird oder nicht, also entschuldige ich mich, wenn dieser Effekt nicht für dich gesehen wird.Das blaue Fokusrechteck auf Eingabefeldern in HTML/CSS loswerden?

Input und TextFields scheinen ein blaues Rechteck zu haben, wenn sie fokussiert sind, zumindest auf Firefox und Chrome auf einem Mac. Ich habe einen benutzerdefinierten Fokus-Effekt auf einer Website, und ich frage mich, ob ich vermeiden kann, dass dieses Standardauswahlverhalten angezeigt wird. Google vermeidet es auf ihrer Website. Ich ging so weit, um den "in-effect" CSS-Stil für Googles Eingabefeld zu bekommen, das auf mein css-Objekt anzuwenden. Es zeigt jedoch immer noch das blaue Rechteck. Ich bin mir nicht ganz sicher, welche Art von Voodoo Google tut, aber es scheint mir, dass es weder HTML noch CSS-Attribute ist. Wer weiß, wie man diesen Effekt vermeidet? Vielen Dank!

Antwort

99

Es ist in der Tat ein CSS-Attribut. Dadurch wird der leuchtende Effekt ausgeblendet:

input:focus, textarea:focus { 
    outline: none; 
} 
+0

Ich habe das auch schon mal benutzt .. Doh. Vielen Dank .. (funktioniert hervorragend) – Kyle

+11

Beachten Sie, dass dies eine Browser-Funktion ist. Benutzer, insbesondere keyboardzentrierte Benutzer, wissen gerne, wo der Fokus liegt, bevor sie tippen. Wenn Sie dieses Verhalten entfernen, sollten Sie in Erwägung ziehen, andere Möglichkeiten anzugeben, um den Fokus für den Benutzer anzugeben. – Doug

+0

Um das zu ergänzen, was Doug gesagt hat, ist dies nicht nur eine Usability-Funktion, sondern auch eine Barrierefreiheit. Siehe http://developer.chrome.com/extensions/a11y.html#keyboard Es ist ein wenig nervig, dass auf OSX der Umriss so fett ist. –

Verwandte Themen