Comment supprimer la bordure surlignée sur un élément Texte d'entrée

Pour supprimer toutes les entrées

input {
 outline:none;
}

il s'agit d'un vieux fil, mais à titre de référence, il est important de noter que la désactivation du contour d'un élément d'entrée n'est pas recommandée car elle entrave l'accessibilité.

la propriété outline est là pour une raison - fournir aux utilisateurs une indication claire de la mise au point du clavier. Pour plus d'informations et d'autres sources sur ce sujet, voir http://outlinenone.com /

utilisez ce code:

input:focus {
    outline: 0;
}

vous pourriez utiliser CSS pour désactiver cela! C'est le code que j'utilise pour désactiver la bordure bleue:

*:focus {
outline: none;
}

cela supprimera la bordure bleue!

Ceci est un exemple de travail: JSfiddle.net

Espère que cela aide!

il s'agit d'une préoccupation commune.

par défaut plan que les navigateurs le rendu est moche.

voir par exemple:

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>

---

le "fix" le plus courant que la plupart recommandent est outline:none - qui, s'il est utilisé incorrectement - est un désastre pour l'accessibilité.

---

Si...quel est le contour de toute façon?

Il y a un très sec coupe-site web j'ai trouvé qui explique tout bien.

il fournit une rétroaction visuelle pour les liens qui ont "focus" quand naviguer dans un document web à l'aide de la touche TAB (ou l'équivalent). C'est particulièrement utile pour les gens qui ne peuvent pas utiliser une souris ou d'avoir un visuel déficience. Si vous retirez le contour vous faites votre site inaccessible pour ces personnes.

Ok, essayons le même exemple que ci-dessus, Maintenant utilisez la touche TAB pour naviguer.

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>

remarquez comment vous pouvez dire où la mise au point est même sans cliquer sur l'entrée?

maintenant, essayons outline:none sur notre fidèle <input>

donc, encore une fois, utilisez la touche TAB pour naviguer après cliquez sur le texte et voyez ce qui se passe.

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>

vous voyez comme c'est plus difficile de savoir où est le foyer? Le seul signe révélateur est le curseur clignotant. Mon exemple ci-dessus est trop simpliste. Dans des situations réelles, vous n'auriez pas qu'un seul élément sur la page. Quelque chose de plus le long des lignes de cette.

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

Comparez maintenant cela au même modèle si nous gardons le contour:

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

ainsi nous avons établi le suivant

1. les contours sont laids
2. les enlever rend la vie plus difficile.

---

alors, quelle est la réponse?

enlever le contour laid et ajoutez vos propres repères visuels pour indiquer la mise au point.

voici un exemple très simple de ce que je veux dire.

j'enlève le contour et j'ajoute une bordure inférieure sur : focus et : active . Je supprime également les bordures par défaut sur les côtés supérieur, gauche et droite en les mettant à transparent sur : focus et : active (préférence personnelle)

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>

donc, nous essayons l'approche ci-dessus avec notre "monde réel" exemple de plus tôt:

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

ceci peut être étendu plus loin en utilisant des bibliothèques externes qui construisent sur l'idée de modifier le "contour" au lieu de le supprimer entièrement comme matérialiser

vous pouvez finir avec quelque chose qui n'est pas laid et fonctionne avec très peu d'effort

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>

vous pouvez essayer aussi

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

ou

.classname input{
outline-style: none;
}

supprimer le contour lorsque l'accent est mis sur l'élément, en utilisant la propriété CSS ci-dessous:

input:focus {
    outline: 0;
}

cette propriété CSS supprime le contour pour tous les champs d'entrée sur focus ou utilisez pseudo class pour supprimer le contour de l'élément en utilisant la propriété CSS ci-dessous.

.className input:focus {
    outline: 0;
} 

Cette propriété supprime le contour de l'élément sélectionné.

supprimer tous les styles de mise au point est mauvais pour l'accessibilité et les utilisateurs de clavier en général. Mais les contours sont laids et fournir un style personnalisé concentré pour chaque élément interactif peut être une vraie douleur.

donc le meilleur compromis que j'ai trouvé est de montrer les styles de contour seulement quand nous détectons que l'utilisateur utilise le clavier pour naviguer. Fondamentalement, si l'utilisateur appuie sur L'onglet, nous montrons les contours et s'il utilise la souris, nous les cachons.

Il ne vous empêche pas d'écrire des styles de focus personnalisés pour certains éléments, mais au moins il fournit un bon défaut.

C'est comment je le fais:

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

j'ai essayé toutes les réponses et je ne pouvais toujours pas faire travailler le mien sur Mobile , jusqu'à ce que je trouve -webkit-tap-highlight-color .

Donc, ce qui a fonctionné pour moi...

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

cela m'a troublé pendant un certain temps jusqu'à ce que je découvre que la ligne n'était ni une bordure ni un contour, c'était une ombre. Donc pour l'enlever j'ai dû utiliser ceci:

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

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

essayez aussi

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

}

aucune des solutions N'a fonctionné pour moi dans Firefox.

la solution suivante change le style de bordure de mise au point pour Firefox et définit le contour à aucun pour les autres navigateurs.

j'ai effectivement fait passer la frontière de mise au point d'une lueur bleue 3px à un style de Frontière qui correspond à la frontière de zone de texte. Voici quelques styles de bordure:

frontière tiretée (frontière 2px tiretée rouge )):

pas de Frontière! (frontière 0px):

frontière Textarea (frontière 1px gris plein):

voici le 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>

vous pouvez enlever la bordure orange ou bleue (contour) autour des zones de texte / entrée en utilisant: contour: aucun

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