Wie kann man die Eingabehervorhebung / den Fokusrahmen von Chrome zurücksetzen / entfernen?

Question

Ich habe gesehen, dass Chrom einen dickeren Rand auf :focus aber in meinem Fall, in dem ich auch border-radius verwendet habe, sieht es irgendwie anders aus. Gibt es eine Möglichkeit, das zu entfernen?

Answer 1

Sie sollten in der Lage sein, sie zu entfernen, indem Sie

outline: none;

aber bedenken Sie, dass dies möglicherweise die Benutzerfreundlichkeit beeinträchtigt: Es wird schwer zu erkennen sein, ob ein Element fokussiert ist, was schlecht sein kann, wenn man durch alle Elemente eines Formulars mit der Tab Taste - Sie sollten irgendwie reflektieren, wenn ein Element fokussiert ist.

Answer 2

Ich musste alles Folgende tun, um ihn vollständig zu entfernen:

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

例

button {
  border-radius: 20px;
  padding: 20px;
}

.no-focusborder:focus {
  outline-style: none;
  box-shadow: none;
  border-color: transparent;
  background-color: black;
  color: white;
}

<p>Click in the white space, then press the "Tab" key.</p>
<button>Button 1 (unchanged)</button>
<button class="no-focusborder">Button 2 (no focus border, custom focus indicator to show focus is present but the unwanted highlight is gone)</button>
<br/><br/><br/><br/><br/><br/>

Answer 3

Um den Standardfokus zu entfernen, verwenden Sie Folgendes in Ihrer Standard-.css-Datei:

:focus {outline:none;}

Sie können dann die Farbe des Fokusrahmens entweder einzeln pro Element oder in der Standard-.css steuern:

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

Offensichtlich ersetzen red mit dem von Ihnen gewählten Hexadezimalcode.

Sie können auch den Rahmen unberührt lassen und die Hintergrundfarbe (oder das Bild) steuern, um das Feld hervorzuheben:

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

:-)

Answer 4

Das wird auf jeden Fall funktionieren. Der orangefarbene Umriss wird nicht mehr angezeigt Gemeinsam für alle Tags:

*:focus {
    outline: none;
   }

Spezifisch für ein bestimmtes Tag, z. B.: Eingabe-Tag

input:focus{
   outline:none;
  }

Answer 5

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

Damit sollte es klappen.