2010-09-23 12 views
34

Wenn Sie Chrome oder Safari verwenden, zeigt ein active text box oder text area einen blau/orangefarbenen border um die Box. Ich habe einige Seiten gesehen, die das loswerden, aber ich habe ihre CSS kopiert und sie ist immer noch da. Wie mache ich es?Wie wird die Hervorhebung eines Textfelds in Chrome/Safari entfernt?

+0

Weiteres auf diese Frage, ich frage mich, ob es möglich ist, die Farbe der Kontur zu verändern, anstatt nur zu deinstallieren? Ich bin in der gleichen Position, wenn der Umriss auftritt, bekomme ich eine hässliche grüne Farbe. Wäre toll, es zu ändern! – Kyle

Antwort

73

Das folgende CSS entfernt in der Regel die Standard-Highlight-Grenze:

input:focus {outline: none; } 

Es ist daran zu erinnern, dass der Umriss ein nützliches visuelles Feedback für den UI-Fokus ist, für die Benutzer keine Maus (Tastatur-Navigation verwenden, für Beispiel), und es lohnt sich, einen anderen visuellen Hinweis zu ersetzen, um den Verlust des Umrisses zu ersetzen.

+1

Danke! Ja, ich bin definitiv ... es ist nur ein Hintergrund für die Eingaben, der es hässlich aussehen lässt. – Chris

+0

Als Antwort dann markieren. –

+0

@Chris, immer ein Vergnügen. Und es war eine Just-in-Case-Erinnerung, keine Beleidigung beabsichtigt =) –

15

können Sie

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

verwenden, aber versuchen Hinweise an den Benutzer zu geben, dass das Formularelement fokussiert ist, für die Zugänglichkeit Gründen.

+4

Nun, ich werde dir +1 geben, da wir die gleiche Antwort zur gleichen Zeit gefunden haben ... (Ich würde mich sonst unhöflich fühlen) =) –

3

Ich habe gerade dies:

:focus { outline: none; } 
Verwandte Themen