css - tag - html title tooltip




So entfernen Sie die Rahmenhervorhebung für ein Eingabetextelement (9)

Wenn ein html-Element "fokussiert" ist (aktuell ausgewählt / mit Tabs versehen), wird es von vielen Browsern (zumindest Safari und Chrome) umrandet.

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

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

FireFox scheint das nicht zu tun, oder lässt mich zumindest kontrollieren

border: x;

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

Aber Safari zu bekommen, um dieses bisschen Flare zu entfernen, wäre nett.

Vielen Dank


Dies ist ein gemeinsames Anliegen.

Die standardmäßige outline , die Browser darstellen, ist hässlich.

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

Der am häufigsten empfohlene "Fix", der am besten empfohlen wird, ist outline:none - was, wenn es falsch verwendet wird - ist ein Desaster für die Zugänglichkeit.

Also ... welchen Nutzen hat die Gliederung überhaupt?

Es gibt eine sehr trockene Website, die ich gefunden habe und die alles gut erklärt.

Es bietet visuelles Feedback für Links, die beim Navigieren eines Webdokuments mit der TAB-Taste (oder einer entsprechenden Option) "fokussiert" sind. 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 Website für diese Personen nicht zugänglich.

Ok, lass uns das gleiche Beispiel wie oben ausprobieren, nun benutze die TAB Taste 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 gerade ist, ohne auf die Eingabe zu klicken?

Nun, versuchen wir es mit der outline:none auf unserer vertrauenswürdigen <input>

Also, noch einmal, verwenden Sie die TAB Taste, 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 Zeichen ist der blinkende Cursor. Mein Beispiel oben ist zu einfach. In realen Situationen hätten Sie nicht nur ein Element auf der Seite. Etwas mehr in diesem Sinne.

.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 nun das gleiche Template, wenn wir den Umriss behalten:

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

So haben wir folgendes festgestellt

  1. Umrisse sind hässlich
  2. Sie zu entfernen macht das Leben schwieriger.

Also, was ist 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, was ich meine.

Ich entferne den Umriss und füge einen unteren Rand hinzu :focus und :active . Ich entferne auch die Standardrahmen auf der oberen, linken und rechten Seite, indem ich sie auf transparent setze :focus und :active (persönliche Vorlieben)

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 "realen" Beispiel 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 Verwendung externer Bibliotheken, die auf der Idee basieren, den "Umriss" zu modifizieren, im Gegensatz zu einem vollständigen Entfernen wie Materialize

Sie können etwas erreichen, 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>


Benutze diesen Code:

input:focus {
    outline: 0;
}

Das verwirrte mich einige Zeit, bis ich entdeckte, dass die Linie weder eine Umrandung 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;
}

Dies ist ein alter Thread, aber als Referenz ist es wichtig zu beachten, dass das Deaktivieren der Gliederung eines Eingabeelements nicht empfohlen wird, da es die Barrierefreiheit behindert.

Die Outline-Eigenschaft ist aus einem bestimmten Grund vorhanden, um den Benutzern einen deutlichen Hinweis auf den Tastaturfokus zu geben. Weitere Informationen und weitere Quellen zu diesem Thema finden Sie unter http://outlinenone.com/


Entfernen Sie die Gliederung, wenn der Fokus auf einem Element liegt, indem Sie die CSS-Eigenschaft verwenden:

input:focus {
    outline: 0;
}

Diese CSS-Eigenschaft entfernt die Gliederung für alle Eingabefelder im Fokus oder verwendet die Pseudoklasse, um die Gliederung des Elements unter Verwendung der CSS-Eigenschaft zu entfernen.

.className input:focus {
    outline: 0;
} 

Diese Eigenschaft entfernt die Gliederung für das ausgewählte Element.


Ich habe alle Antworten ausprobiert und ich konnte immer noch nicht auf meinem Handy arbeiten , bis ich -webkit-tap-highlight-color .

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

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

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

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

Sie könnten CSS verwenden, um das zu deaktivieren! Dies ist der Code, den ich zum Deaktivieren des blauen Rahmens verwende:

*:focus {
outline: none;
}

Dies wird den blauen Rand entfernen!

Dies ist ein funktionierendes Beispiel: JSfiddle.net

Ich hoffe es hilft!


Versuchen Sie in Ihrem Fall:

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

Oder im Allgemeinen, 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 nehmen, um Elemente zu unterstützen, bei denen das Attribut contenteditable auf " true (wodurch sie zu einer Art Eingabeelement werden). Folgendes sollte auch auf diese zielen (in CSS3-fähigen Browsern):

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

Obwohl ich es aus Gründen der Vollständigkeit nicht empfehlen würde, könntest du den Fokus immer auf alles deaktivieren:

*:focus {
    outline: none;
}

Beachten Sie, dass es sich bei dem Fokusumriss um eine Funktion zur Barrierefreiheit und Benutzerfreundlichkeit handelt. Es zeigt dem Benutzer an, auf welches Element er gerade fokussiert ist.





border