Comment supprimer la surbrillance de bordure sur un élément de texte d'entrée

Lorsqu'un élément HTML est «concentré» (actuellement sélectionné / tabulé), de nombreux navigateurs (au moins Safari et Chrome) mettent une bordure bleue autour de lui.

Pour la mise en page sur laquelle je travaille, cela est gênant et ne semble pas correct.

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

Firefox ne semble pas faire cela, ou du moins, me permettra de le contrôler avec:

border: x;

Si quelqu'un peut me dire comment fonctionne IE, je serais curieux.

Faire en sorte que Safari supprime ce petit éclat serait bien.

Dans votre cas, essayez:

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

Ou en général, pour affecter tous les éléments de formulaire de base:

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

Dans les commentaires, Noah Whitmore a suggéré d'aller encore plus loin pour prendre en charge les éléments dont l' contenteditableattribut est défini sur true(ce qui en fait en fait un type d'élément d'entrée). Les éléments suivants devraient également cibler ceux-ci (dans les navigateurs compatibles CSS3):

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

Bien que je ne le recommanderais pas, par souci d'exhaustivité, vous pouvez toujours désactiver le contour de focus sur tout avec ceci:

*:focus {
    outline: none;
}

Gardez à l'esprit que le plan de mise au point est une fonctionnalité d'accessibilité et de convivialité; il indique à l'utilisateur quel élément est actuellement ciblé.

Pour le supprimer de toutes les entrées

input {
 outline:none;
}

Il s'agit d'un ancien thread, mais pour 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é de contour est là pour une raison - fournissant aux utilisateurs une indication claire de la focalisation du clavier. Pour plus de lecture et des sources supplémentaires sur ce sujet, voir http://outlinenone.com/

C'est une préoccupation commune.

Le contour par défaut que les navigateurs rendent est moche.

Voir ceci 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 "correctif" le plus courant que la plupart recommandent est outline:none- qui, s'il n'est pas utilisé correctement - est un désastre pour l'accessibilité.

Alors ... à quoi sert le contour de toute façon?

Il y a un site Web très sec que j'ai trouvé qui explique tout bien.

Il fournit une rétroaction visuelle pour les liens qui ont le «focus» lors de la navigation dans un document Web à l'aide de la touche TAB (ou équivalent). Ceci est particulièrement utile pour les personnes qui ne peuvent pas utiliser de souris ou qui ont une déficience visuelle. Si vous supprimez le contour, vous rendez votre site inaccessible à ces personnes.

Ok, essayons le même exemple que ci-dessus, utilisez maintenant la TABtouche 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 savoir où se trouve le focus même sans cliquer sur l'entrée?

Maintenant, essayons outline:nonenotre fidèle<input>

Donc, encore une fois, utilisez la TABtouche pour naviguer après avoir cliqué sur le texte et voir 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 à quel point il est plus difficile de déterminer où se concentrer? 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 un seul élément sur la page. Quelque chose de plus dans le sens de cela.

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

Maintenant, comparez 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>

Nous avons donc établi ce qui suit

1. Les contours sont moches
2. Les supprimer rend la vie plus difficile.

Alors, quelle est la réponse?

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

Je supprime le contour et 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 droit en les définissant sur transparent sur : focus et : actif (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 exemple "réel" du précédent:

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

Cela peut être étendu davantage en utilisant des bibliothèques externes qui s'appuient sur l'idée de modifier le "contour" au lieu de le supprimer entièrement comme Materialise

Vous pouvez vous retrouver avec quelque chose qui n'est pas moche et qui 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>

Cela m'a dérouté 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 le supprimer, 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;
}

Vous pouvez utiliser CSS pour désactiver cela! Voici 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

J'espère que cela aide!

La suppression de tous les styles de focus est néfaste pour l'accessibilité et les utilisateurs de clavier en général. Mais les contours sont moches et fournir un style ciblé personnalisé pour chaque élément interactif peut être une vraie douleur.

Le meilleur compromis que j'ai trouvé consiste donc à n'afficher les styles de contour que lorsque nous détectons que l'utilisateur utilise le clavier pour naviguer. Fondamentalement, si l'utilisateur appuie sur TAB, 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 une bonne valeur par défaut.

Voici 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 n'ai toujours pas réussi à faire fonctionner la mienne sur Mobile , jusqu'à ce que je trouve -webkit-tap-highlight-color.

Donc, ce qui a fonctionné pour moi, c'est ...

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

La seule solution qui a fonctionné avec moi

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);
 }

Utilisez ce code:

input:focus {
    outline: 0;
}

Aucune des solutions n'a fonctionné pour moi dans Firefox.

La solution suivante modifie le style de bordure sur focus pour Firefox et définit le contour sur aucun pour les autres navigateurs.

J'ai effectivement fait passer la bordure de mise au point d'une lueur bleue de 3 pixels à un style de bordure qui correspond à la bordure de la zone de texte. Voici quelques styles de bordure:

Bordure pointillée (bordure 2px en pointillé rouge):

Pas de frontière! (bordure 0px):

Bordure de zone de texte (bordure 1px gris uni):

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 également essayer ceci

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

ou

.classname input{
outline-style: none;
}

Vous pouvez supprimer la bordure orange ou bleue (contour) autour des zones de texte / saisie en utilisant: contour: aucun

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

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

input:focus {
    outline: 0;
}

Cette propriété CSS supprime le contour de tous les champs d'entrée sur le focus ou utilise une pseudo-classe pour supprimer le contour de l'élément à l'aide de la propriété CSS ci-dessous.

.className input:focus {
    outline: 0;
} 

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

Essaye ça

*:focus {
    outline: none;
}

Cela affecterait tout au long de vos pages