Zurücksetzen/Entfernen von Chroms Eingabe-Hervorhebungs-/Fokusrahmen?

Question

Ich habe gesehen, dass Chrom eine dickere Grenze auf :focus setzt, aber es sieht irgendwie in meinem Fall aus, wo ich Border-Radius auch verwendet habe. Gibt es das überhaupt, um das zu entfernen?

Answer 1

Sie sollten sie in der Lage sein, zu entfernen

outline: none; 

verwenden, aber denken Sie daran, dies für die Benutzerfreundlichkeit möglicherweise schlecht ist: Es wird schwer sein, zu sagen, ob ein Element fokussiert ist, welche saugen Wenn Sie mit dem Schlüssel Tab durch alle Elemente eines Formulars gehen, sollten Sie nachdenken, wenn ein Element fokussiert ist.

Answer 2

Sie könnten einfach outline: none; und Rand auf eine andere Farbe im Fokus.

:focus {outline:none;} 

Anschließend können Sie steuern den Fokus Randfarbe entweder einzeln durch das Element, oder im Standard-CSS-:

Answer 3

Um den Standard-Fokus, verwenden Sie die folgenden in Ihrem Standard-CSS-Datei zu entfernen

:focus {outline:none;border:1px solid red} 

Offensichtlich ersetzen red mit Ihrem gewählten Hex-Code.

Sie könnten auch die Grenze unberührt lassen und die Hintergrundfarbe (oder Bild) steuern das Feld zu markieren:

:focus {outline:none;background-color:red} 

:-)

Answer 4

Dies wird auf jeden Fall funktionieren. Orange Umriss wird mehr zeigen, nicht .. Gemeinsam für alle tags:

*:focus { 
    outline: none; 
    } 

Spezifische zu einem gewissen Tag, ex: input-Tag

input:focus{ 
    outline:none; 
    } 

Answer 5

Ich hatte alle die Folge zu tun vollständig zu entfernen es

outline-style:none; 
box-shadow:none; 
border-color:transparent; 

Answer 6

Problem ist, wenn Sie bereits eine Gliederung haben. Chrome verändert noch etwas und es ist ein echter Schmerz. Ich kann nicht finden, was sich ändern:

.search input { 
    outline: .5em solid black; 
    width:41%; 
    background-color:white; 
    border:none; 
    font-size:1.4em; 
    padding: 0 0.5em 0 0.5em; 
    border-radius:3px; 
    margin:0; 
    height:2em; 
} 

.search input:focus, .search input:hover { 
    outline: .5em solid black !important; 
    box-shadow:none; 
    border-color:transparent;; 
} 

.search button { 
    border:none; 
    outline: .5em solid black; 
    color:white; 
    font-size:1.4em; 
    padding: 0 0.9em 0 0.9em; 
    border-radius: 3px; 
    margin:0; 
    height:2em; 
    background: -webkit-gradient(linear, left top, left bottom, from(#4EB4F8), to(#4198DE)); 
    background: -webkit-linear-gradient(#4EB4F8, #4198DE); 
    background: -moz-linear-gradient(top, #4EB4F8, #4198DE); 
    background: -ms-linear-gradient(#4EB4F8, #4198DE); 
    background: -o-linear-gradient(#4EB4F8, #4198DE); 
    background: linear-gradient(#4EB4F8, #4198DE); 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4EB4F8', endColorstr='#4198DE'); 
    zoom: 1; 
} 

Answer 7

Der einfachste Weg ist, um so etwas zu verwenden, aber beachten Sie, dass es nicht so gut sein kann.

input { 
    outline: none; 
} 

Ich hoffe, Sie finden das nützlich.

Answer 8

border:0; 
outline:none; 
box-shadow:none; 

Dies sollte den Trick tun.