So entfernen Sie die Randmarkierung eines Eingabetextelements

610

Wenn ein HTML-Element fokussiert ist (derzeit ausgewählt / mit Registerkarten versehen), wird es von vielen Browsern (zumindest Safari und Chrome) blau umrandet.

Für das Layout, an dem ich arbeite, ist dies ablenkend und sieht nicht richtig aus.

<input type="text" name="user" class="middle" id="user" tabindex="1" />

Firefox scheint dies nicht zu tun oder lässt mich es zumindest kontrollieren mit:

border: x;

Wenn mir jemand sagen kann, wie der IE funktioniert, wäre ich neugierig.

Es wäre schön, Safari dazu zu bringen, dieses kleine Stückchen Fackel zu entfernen.

css input safari webkit border user170579
quelle

1099

Versuchen Sie in Ihrem Fall:

input.middle:focus {
    outline-width: 0;
}

Oder allgemein, um alle grundlegenden Formelemente zu beeinflussen:

input:focus,
select:focus,
textarea:focus,
button:focus {
    outline: none;
}

In den Kommentaren schlug Noah Whitmore vor, dies noch weiter zu entwickeln, um Elemente zu unterstützen, für die das contenteditableAttribut festgelegt ist true(wodurch sie effektiv zu einer Art Eingabeelement werden). Folgendes sollte auch auf diese abzielen (in CSS3-fähigen Browsern):

[contenteditable="true"]:focus {
    outline: none;
}

Obwohl ich es der Vollständigkeit halber nicht empfehlen würde, können Sie die Fokuskontur für alles jederzeit deaktivieren :

*:focus {
    outline: none;
}

Beachten Sie, dass der Fokusumriss eine Barrierefreiheits- und Benutzerfreundlichkeitsfunktion ist. Es gibt dem Benutzer einen Hinweis darauf, auf welches Element derzeit fokussiert ist.

Cᴏʀᴏʀ
quelle

10

Danke Cory, toller Tipp. Sie müssen das CSS auch dem Textbereich zuweisen, um alle Eingabefelder abzudecken. input:focus, textarea:focus {outline: none;}

BaronGrivet

7

Vergessen Sie nicht auch auswählenselect:focus {outline:none;}

Geek Num 88

2

Es gibt auch das <button>Tag, das unter anderem von jQuery UI und Twitter Bootstrap verwendet wird button: focus. Der Vollständigkeit halber würde ich es der Liste hinzufügen .

Chris Parton

1

Nach meiner Erfahrung kann dies ohne Fokus geschehen. In diesem Fall musste ich es anwendenbutton, button:focus { outline:none; }

Mike Lyons

1

@ Cᴏʀᴏʀ Würde es Ihnen etwas ausmachen, die Notiz über a11y und Benutzerfreundlichkeit ganz oben auf Ihre Frage zu setzen? IMO würde es Ihre Antwort erheblich verbessern, da das Entfernen von a11y-Funktionen eine schlechte Praxis ist.

Josef Engelfrost

64

So entfernen Sie es von allen Eingängen

input {
 outline:none;
}

marcjae
quelle

31

Dies ist ein alter Thread, aber als Referenz ist zu beachten, dass das Deaktivieren der Gliederung eines Eingabeelements nicht empfohlen wird, da dies die Zugänglichkeit behindert.

Die Gliederungseigenschaft gibt es aus einem Grund - sie gibt Benutzern einen klaren Hinweis auf den Tastaturfokus. Weitere Informationen und Quellen zu diesem Thema finden Sie unter http://outlinenone.com/.

Boaz - Monica wieder einsetzen
quelle

1

Boaz, FYI input.middle {Outline: none} ermöglicht es Ihnen weiterhin, die Elemente (einschließlich input.middle) zu durchlaufen. Durch Drücken der Tabulatortaste wird auch das Eingabe-Tag fokussiert. Das einzige ist, dass Sie den Fokus (Umrissfokus) nicht sehen können. Es ist also nicht so schädlich, es zu benutzen ..

:)

11

@ AnishNair Only thing is that you won't be able to see the focus(outline focus) on it- und genau das ist mein Punkt. Durch Entfernen des Umrisses wird die visuelle Anzeige des Fokusereignisses deaktiviert , nicht des tatsächlichen Ereignisses. Wenn Sie die visuelle Anzeige entfernen, wird es für Menschen mit Behinderungen, die sich auf diese Anzeige verlassen, schwieriger.

Boaz - Stellen Sie Monica am

2

Manchmal müssen wir Kompromisse eingehen, um etwas zu erreichen :)

Anish Nair

6

@ AnishNair True. Aber mehr als oft würden Leute, die diesen Thread lesen, den einfachen Ausweg (dh outline:none;) bevorzugen, ohne die Auswirkungen zu berücksichtigen. Nur weil etwas einfach ist und Zeit spart, heißt das nicht, dass es die beste Vorgehensweise ist :)

Boaz - Reinstate Monica

5

Ich komme zu spät zur Diskussion, aber Sie können den fokussierten Status der Eingaben trotzdem formatieren (z. B. Ändern der Rahmenfarbe oder -breite). Solange Sie dabei die Barrierefreiheit berücksichtigen (guter Kontrast usw.), ist sie genauso zugänglich wie die Standardkonturen.

Meg

18

Dies ist ein häufiges Anliegen.

Der Standard Umriss , dass Browser machen ist hässlich.

Siehe dies zum Beispiel:

Code-Snippet anzeigen

form,
label {
  margin: 1em auto;
}

label {
  display: block;
}

<form>
  <label>Click to see the input below to see the outline</label>
  <input type="text" placeholder="placeholder text" />
</form>

Erweitern Sie das Snippet

Die häufigste "Korrektur", die am meisten empfohlen wird, ist outline:none- was bei falscher Verwendung - eine Katastrophe für die Barrierefreiheit.

Also ... was nützt der Umriss überhaupt?

Ich habe eine sehr trocken geschnittene Website gefunden, die alles gut erklärt.

Es bietet visuelles Feedback für Links, die beim Navigieren in einem Webdokument mit der TAB-Taste (oder einer gleichwertigen Taste) "Fokus" haben. Dies ist besonders nützlich für Leute, die keine Maus benutzen können oder eine Sehbehinderung haben. Wenn Sie die Gliederung entfernen, machen Sie Ihre Site für diese Personen unzugänglich.

Ok, probieren wir das gleiche Beispiel wie oben aus und TABnavigieren jetzt mit der Taste.

Code-Snippet anzeigen

form,
label {
  margin: 1em auto;
}

label {
  display: block;
}

<form>
  <label>Click on this text and then use the TAB key to naviagte inside the snippet.</label>
  <input type="text" placeholder="placeholder text" />
</form>

Erweitern Sie das Snippet

Beachten Sie, wie Sie erkennen können, wo sich der Fokus befindet, ohne auf die Eingabe zu klicken.

Versuchen outline:nonewir es jetzt mit unserem Vertrauenswürdigen<input>

Verwenden Sie also erneut die TABTaste, um nach dem Klicken auf den Text zu navigieren und zu sehen, was passiert.

Code-Snippet anzeigen

form,
label {
  margin: 1em auto;
}

label {
  display: block;
}

input {
  outline: none;
}

<form>
  <label>Click on this text and then use the TAB key to naviagte inside the snippet.</label>
  <input type="text" placeholder="placeholder text" />
</form>

Erweitern Sie das Snippet

Sehen Sie, wie es schwieriger ist, herauszufinden, wo der Fokus liegt? Das einzige Hinweiszeichen ist das Blinken des Cursors. Mein Beispiel oben ist zu simpel. In realen Situationen hätten Sie nicht nur ein Element auf der Seite. Etwas mehr in dieser Richtung.

Code-Snippet anzeigen

.wrapper {
  width: 500px;
  max-width: 100%;
  margin: 0 auto;
}

form,
label {
  margin: 1em auto;
}

label {
  display: block;
}

input {
  outline: none;
}

<div class="wrapper">

  <form>
    <label>Click on this text and then use the TAB key to naviagte inside the snippet.</label>
    <input type="text" placeholder="placeholder text" />
    <input type="text" placeholder="placeholder text" />
    <input type="text" placeholder="placeholder text" />
    <input type="text" placeholder="placeholder text" />
    <input type="text" placeholder="placeholder text" />
    <input type="text" placeholder="placeholder text" />
  </form>

  <form>
    First name:<br>
    <input type="text" name="firstname"><br> Last name:<br>
    <input type="text" name="lastname">
  </form>


  <form>
    <input type="radio" name="gender" value="male" checked> Male<br>
    <input type="radio" name="gender" value="female"> Female<br>
    <input type="radio" name="gender" value="other"> Other
  </form>



  <form>
    <label for="GET-name">Name:</label>
    <input id="GET-name" type="text" name="name">
  </form>


  <form>
    <label for="POST-name">Name:</label>
    <input id="POST-name" type="text" name="name">
  </form>


  <form>
    <fieldset>
      <legend>Title</legend>
      <input type="radio" name="radio" id="radio">
      <label for="radio">Click me</label>
    </fieldset>
  </form>

</div>

Erweitern Sie das Snippet

Vergleichen Sie das jetzt mit derselben Vorlage, wenn wir die Gliederung beibehalten:

Code-Snippet anzeigen

.wrapper {
  width: 500px;
  max-width: 100%;
  margin: 0 auto;
}

form,
label {
  margin: 1em auto;
}

label {
  display: block;
}

<div class="wrapper">

  <form>
    <label>Click on this text and then use the TAB key to naviagte inside the snippet.</label>
    <input type="text" placeholder="placeholder text" />
    <input type="text" placeholder="placeholder text" />
    <input type="text" placeholder="placeholder text" />
    <input type="text" placeholder="placeholder text" />
    <input type="text" placeholder="placeholder text" />
    <input type="text" placeholder="placeholder text" />
  </form>

  <form>
    First name:<br>
    <input type="text" name="firstname"><br> Last name:<br>
    <input type="text" name="lastname">
  </form>


  <form>
    <input type="radio" name="gender" value="male" checked> Male<br>
    <input type="radio" name="gender" value="female"> Female<br>
    <input type="radio" name="gender" value="other"> Other
  </form>



  <form>
    <label for="GET-name">Name:</label>
    <input id="GET-name" type="text" name="name">
  </form>


  <form>
    <label for="POST-name">Name:</label>
    <input id="POST-name" type="text" name="name">
  </form>


  <form>
    <fieldset>
      <legend>Title</legend>
      <input type="radio" name="radio" id="radio">
      <label for="radio">Click me</label>
    </fieldset>
  </form>

</div>

Erweitern Sie das Snippet

Wir haben also Folgendes festgestellt

Umrisse sind hässlich
Das Entfernen erschwert das Leben.

Was ist die Antwort?

Entfernen Sie den hässlichen Umriss und fügen Sie Ihre eigenen visuellen Hinweise hinzu, um den Fokus anzuzeigen.

Hier ist ein sehr einfaches Beispiel dafür, was ich meine.

Ich entferne den Umriss und füge einen unteren Rand hinzu : focus und : active . Ich entferne auch die Standardränder oben, links und rechts, indem ich sie auf transparent stelle : Fokus und : Aktiv (persönliche Präferenz)

Code-Snippet anzeigen

form,
label {
  margin: 1em auto;
}

label {
  display: block;
}

input {
  outline: none
}

input:focus,
input:active {
  border-color: transparent;
  border-bottom: 2px solid red
}

<form>
  <label>Click to see the input below to see the outline</label>
  <input type="text" placeholder="placeholder text" />
</form>

Erweitern Sie das Snippet

Also versuchen wir den obigen Ansatz mit unserem "realen" Beispiel von früher:

Code-Snippet anzeigen

.wrapper {
  width: 500px;
  max-width: 100%;
  margin: 0 auto;
}

form,
label {
  margin: 1em auto;
}

label {
  display: block;
}

input {
  outline: none
}

input:focus,
input:active {
  border-color: transparent;
  border-bottom: 2px solid red
}

<div class="wrapper">

  <form>
    <label>Click on this text and then use the TAB key to naviagte inside the snippet.</label>
    <input type="text" placeholder="placeholder text" />
    <input type="text" placeholder="placeholder text" />
    <input type="text" placeholder="placeholder text" />
    <input type="text" placeholder="placeholder text" />
    <input type="text" placeholder="placeholder text" />
    <input type="text" placeholder="placeholder text" />
  </form>

  <form>
    First name:<br>
    <input type="text" name="firstname"><br> Last name:<br>
    <input type="text" name="lastname">
  </form>


  <form>
    <input type="radio" name="gender" value="male" checked> Male<br>
    <input type="radio" name="gender" value="female"> Female<br>
    <input type="radio" name="gender" value="other"> Other
  </form>



  <form>
    <label for="GET-name">Name:</label>
    <input id="GET-name" type="text" name="name">
  </form>


  <form>
    <label for="POST-name">Name:</label>
    <input id="POST-name" type="text" name="name">
  </form>


  <form>
    <fieldset>
      <legend>Title</legend>
      <input type="radio" name="radio" id="radio">
      <label for="radio">Click me</label>
    </fieldset>
  </form>

</div>

Erweitern Sie das Snippet

Dies kann durch die Verwendung externer Bibliotheken erweitert werden, die auf der Idee aufbauen, die "Gliederung" zu ändern, anstatt sie wie Materialise vollständig zu entfernen

Sie können mit etwas enden, das nicht hässlich ist und mit sehr wenig Aufwand funktioniert

Code-Snippet anzeigen

body {
  background: #444
}

.wrapper {
  padding: 2em;
  width: 400px;
  max-width: 100%;
  text-align: center;
  margin: 2em auto;
  border: 1px solid #555
}

button,
.wrapper {
  border-radius: 3px;
}

button {
  padding: .25em 1em;
}

input,
label {
  color: white !important;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.1/css/materialize.min.css" />

<div class="wrapper">
  <form>
    <input type="text" placeholder="Enter Username" name="uname" required>
    <input type="password" placeholder="Enter Password" name="psw" required>
    <button type="submit">Login</button>
  </form>
</div>

Erweitern Sie das Snippet

Ich habe Kode
quelle

18

Das verwirrte mich einige Zeit, bis ich entdeckte, dass die Linie weder ein Rand noch ein Umriss war, sondern ein Schatten. Um es zu entfernen, musste ich Folgendes verwenden:

input:focus, input.form-control:focus {

    outline:none !important;
    outline-width: 0 !important;
    box-shadow: none;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
}

Rikard Askelöf
quelle

6

Sie können CSS verwenden, um das zu deaktivieren! Dies ist der Code, mit dem ich den blauen Rand deaktiviere:

*:focus {
outline: none;
}

Dadurch wird der blaue Rand entfernt!

Dies ist ein funktionierendes Beispiel: JSfiddle.net

Ich hoffe es hilft!

1010
quelle

4

Das Entfernen aller Fokusstile ist für die Barrierefreiheit und Tastaturbenutzer im Allgemeinen schlecht. Aber Konturen sind hässlich und die Bereitstellung eines benutzerdefinierten, fokussierten Stils für jedes einzelne interaktive Element kann ein echtes Problem sein.

Der beste Kompromiss, den ich gefunden habe, besteht darin, die Gliederungsstile nur dann anzuzeigen, wenn wir feststellen, dass der Benutzer die Tastatur zum Navigieren verwendet. Wenn der Benutzer die Tabulatortaste drückt, werden die Umrisse angezeigt, und wenn er die Maus verwendet, werden sie ausgeblendet.

Es hindert Sie nicht daran, benutzerdefinierte Fokusstile für einige Elemente zu schreiben, bietet jedoch zumindest eine gute Standardeinstellung.

So mache ich es:

// detect keyboard users

const keyboardUserCssClass = "keyboardUser";

function setIsKeyboardUser(isKeyboard) {
  const { body } = document;
  if (isKeyboard) {
   body.classList.contains(keyboardUserCssClass) || body.classList.add(keyboardUserCssClass);
  } else {
   body.classList.remove(keyboardUserCssClass);
  }
}

// This is a quick hack to activate focus styles only when the user is
// navigating with TAB key. This is the best compromise we've found to
// keep nice design without sacrifying accessibility.
document.addEventListener("keydown", e => {
  if (e.key === "Tab") {
   setIsKeyboardUser(true);
  }
});
document.addEventListener("click", e => {
  // Pressing ENTER on buttons triggers a click event with coordinates to 0
  setIsKeyboardUser(!e.screenX && !e.screenY);
});

document.addEventListener("mousedown", e => {
  setIsKeyboardUser(false);
});

body:not(.keyboardUser) *:focus {
  outline: none;
}

<p>By default, you'll see no outline. But press TAB key and you'll see focussed element</p>
<button>This is a button</button>
<a href="#">This is anchor link</a>
<input type="checkbox" />
<textarea>textarea</textarea>
<select/>

Erweitern Sie das Snippet

Tom Esterez
quelle

Dies ist ein gründlicher Ansatz. Der clickZuhörer ist eine nette Geste.

Keith DC

4

Ich habe alle Antworten ausprobiert und konnte meine immer noch nicht dazu bringen, auf Mobile zu arbeiten , bis ich sie gefunden habe -webkit-tap-highlight-color.

Also, was für mich funktioniert hat ist ...

* { -webkit-tap-highlight-color: transparent; }

Oneezy
quelle

1

Das ist die Lösung, nach der ich gesucht habe. Dies ist besonders nützlich, wenn Sie Touchscreen-Erfahrungen mit Elementen wie li

Anand G

3

Verwenden Sie diesen Code:

input:focus {
    outline: 0;
}

Touhid Rahman
quelle

3

Die einzige Lösung, die bei mir funktioniert hat

input[type="text"]:focus{
     box-shadow: 0 0 0 rgb(255, 255, 255);
}

 input[type="checkbox"]:focus{
      box-shadow: 0 0 0 rgb(255, 255, 255);
 }

Ali Al Amine
quelle

2

Keine der Lösungen hat in Firefox für mich funktioniert.

Die folgende Lösung ändert den Rahmenstil im Fokus für Firefox und setzt den Umriss für andere Browser auf "Keine".

Ich habe den Fokusrand effektiv von einem 3px blauen Leuchten auf einen Randstil umgestellt, der dem Rand des Textbereichs entspricht. Hier sind einige Randstile:

Gestrichelter Rand (Rand 2px rot gestrichelt):

Keine Grenze! (Rand 0px):

Textbereich Rand (Rand 1px durchgehend grau):

Hier ist der Code:

input:focus, textarea:focus {
    outline: none; /** For Safari, etc **/
    border:1px solid gray; /** For Firefox **/
}

#textarea  {
  position:absolute;
  top:10px;
  left:10px;
  right:10px;
  width:calc(100% - 20px);
  height:160px;
  display:inline-block;
  margin-top:-0.2em;
}

<textarea id="textarea">yo</textarea>

Erweitern Sie das Snippet

1,21 Gigawatt
quelle

1

Sie können dies auch versuchen

input[type="text"] {
outline-style: none;
}

oder

.classname input{
outline-style: none;
}

Santosh Khalse
quelle

1

Sie können den orangefarbenen oder blauen Rand (Umriss) um Text- / Eingabefelder entfernen, indem Sie Folgendes verwenden: Umriss: Keine

input {
    background-color: transparent;
    border: 0px solid;
    height: 20px;
    width: 160px;
    color: #CCC;
    outline:none !important;
}

Rizo
quelle

0

Entfernen Sie den Umriss, wenn der Fokus auf dem Element liegt. Verwenden Sie dazu die folgende CSS-Eigenschaft:

input:focus {
    outline: 0;
}

Diese CSS-Eigenschaft entfernt den Umriss für alle Eingabefelder im Fokus oder verwendet die Pseudoklasse, um den Umriss des Elements mithilfe der folgenden CSS-Eigenschaft zu entfernen.

.className input:focus {
    outline: 0;
}

Diese Eigenschaft entfernt den Umriss für das ausgewählte Element.

Shailesh
quelle

0

Versuche dies

*:focus {
    outline: none;
}

Dies würde sich auf Ihre Seiten auswirken

subindas pm
quelle

So entfernen Sie die Randmarkierung eines Eingabetextelements

Antworten:

Dies ist ein häufiges Anliegen.

Also ... was nützt der Umriss überhaupt?

Was ist die Antwort?