it-swarm.com.de

So entfernen Sie die Randmarkierung auf einem Eingabetextelement

Wenn ein HTML-Element "fokussiert" ist (aktuell ausgewählt/mit Tabs versehen), wird es von vielen Browsern (mindestens 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 es mich zumindest steuern mit:

border: x;

Wenn mir jemand sagen kann, wie sich IE verhält, wäre ich neugierig.

Safari dazu zu bringen, dieses kleine Flackern zu entfernen, wäre schön.

536
user170579

Versuchen Sie in Ihrem Fall Folgendes:

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

Oder allgemein, um alle grundlegenden Formularelemente zu beeinflussen:

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

In den Kommentaren schlug Noah Whitmore vor, dies noch weiter zu vertiefen, um Elemente zu unterstützen, deren contenteditable -Attribut auf true gesetzt ist (was sie effektiv zu einer Art Eingabeelement macht). Das Folgende sollte sich auch an diese richten (in CSS3-fähigen Browsern):

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

Obwohl ich es der Vollständigkeit halber nicht empfehlen würde, könnten Sie die Fokuskontur auf allem immer damit deaktivieren:

*:focus {
    outline: none;
}

Denken Sie daran, dass der Fokus eine Zugänglichkeits- und Bedienbarkeitsfunktion ist. Der Benutzer wird darauf hingewiesen, auf welches Element sich der Fokus gerade befindet.

985
Cᴏʀʏ

Um es von allen Eingängen zu entfernen

input {
 outline:none;
}
57
marcjae

Dies ist ein alter Thread, aber zum Nachschlagen ist es wichtig zu beachten, dass das Deaktivieren der Gliederung eines Eingabeelements nicht empfohlen wird, da dies den Zugriff behindert.

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

26
Boaz

Dies ist ein häufiges Anliegen.

Die Standardeinstellung Gliederung , die Browser rendern, ist hässlich.

Siehe dies zum Beispiel:

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>

Das am häufigsten empfohlene "Update" ist outline:none, was bei falscher Verwendung eine Katastrophe für die Barrierefreiheit darstellt.


Also ... von welchem ​​Nutzen ist der Umriss überhaupt?

Es gibt eine sehr trocken geschnittene Website die alles gut erklärt.

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

Ok, probieren wir das gleiche Beispiel wie oben aus. Verwenden Sie jetzt die Taste TAB, um zu navigieren.

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>

Beachten Sie, wie Sie feststellen können, wo der Fokus liegt, ohne auf die Eingabe zu klicken.

Versuchen wir nun outline:none auf unserem vertrauenswürdigen <input>

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

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>

Sehen Sie, wie es schwieriger ist, herauszufinden, wo der Fokus liegt? Das einzige aussagekräftige Zeichen ist der blinkende Cursor. Mein Beispiel oben ist zu simpel. In realen Situationen hätten Sie nicht nur ein Element auf der Seite. Etwas mehr in dieser Richtung.

.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>

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

.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>

Also haben wir folgendes festgestellt

  1. Umrisse sind hässlich
  2. Ihre Entfernung erschwert das Leben.

Wie lautet also die Antwort?

Entfernen Sie die hässliche Kontur 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 an : focus und : active hinzu. Ich entferne auch die Standardrahmen auf der oberen, linken und rechten Seite, indem ich sie auf transparent setze. : focus und : active (persönliche Präferenz)

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>

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

.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>

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

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

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>
11
I haz kode

Dies verwirrte mich für einige Zeit, bis ich feststellte, dass die Linie weder eine Grenze noch eine Kontur war, sondern ein Schatten. Um es zu entfernen, musste ich folgendes benutzen:

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

    outline:none !important;
    outline-width: 0 !important;
    box-shadow: none;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
}
8
Rikard Askelöf

Sie könnten 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!

4
1010

Das Entfernen aller Fokusstile ist für Benutzer mit eingeschränkter Zugänglichkeit und Tastatur im Allgemeinen schlecht. Aber Umrisse sind hässlich, und es kann ein echtes Problem sein, jedem einzelnen interaktiven Element einen benutzerdefinierten, fokussierten Stil zu verleihen.

Der beste Kompromiss, den ich gefunden habe, besteht darin, die Umrissstile nur dann anzuzeigen, wenn festgestellt wird, 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/>
4
Tom Esterez

Ich habe alle Antworten ausprobiert und konnte meine immer noch nicht zum Arbeiten bringen Mobil, bis ich -webkit-tap-highlight-color fand.

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

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

Verwenden Sie diesen Code:

input:focus {
    outline: 0;
}
3
Touhid Rahman

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

Die folgende Lösung ändert den fokussierten Rahmenstil für Firefox und setzt den Umriss für andere Browser auf none.

Ich habe den Fokusrand effektiv von einem 3px blauen Schimmer zu einem Randstil gemacht, der dem Rand des Textbereichs entspricht. Hier sind einige Rahmenstile:

Gestrichelter Rand (Rand 2px rot gestrichelt): Dashed border. border 2px dashed red

Keine Grenze! (Rand 0px):
No border. border:0px

Textfeldrand (Rand 1px durchgehend grau): Textarea border. border 1px solid gray

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>
2
1.21 gigawatts

Sie können dies auch versuchen

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

oder

.classname input{
outline-style: none;
}
1
Santosh Khalse

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

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

Versuchen Sie dies auch

.form-group input {

  display: block;
  background: none;
  padding: 0.175rem 0.175rem 0.0875rem;
  font-size: 1.4rem;
  border-width: 0;
  border-color: transparent;
  line-height: 1.9;
  width: 100%;
  color: #ccc;
  transition: all 0.28s ease;
  box-shadow: none;

}
0
Kondal

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.

0
Shailesh