web-dev-qa-db-fra.com

Comment supprimer la bordure surlignée sur un élément de texte saisi

Lorsqu'un élément HTML est "ciblé" (actuellement sélectionné/tabulé dans), de nombreux navigateurs (au moins Safari et Chrome) placent une bordure bleue autour de celui-ci.

Pour la mise en page sur laquelle je travaille, cela distrait et n'a pas l'air correct.

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

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

border: x;

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

Demander à Safari de supprimer ce petit éclat serait bien.

cssinputsafariwebkitborder
536
user170579

Dans votre cas, essayez:

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

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

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 pour lesquels l'attribut contenteditable est défini sur true (ce qui en fait un type d'élément d'entrée). Les éléments suivants doivent également cibler ceux (dans les navigateurs compatibles CSS3):

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

Bien que je ne le recommande pas, par souci d'exhaustivité, vous pouvez toujours désactiver le contour de la mise au point sur tout avec ceci:

*:focus {
    outline: none;
}

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

985
Cᴏʀʏ

Pour le supprimer de toutes les entrées

input {
 outline:none;
}
57
marcjae

Il s'agit d'un ancien fil de discussion, mais il est important de noter qu'il est déconseillé de désactiver le contour d'un élément d'entrée, car cela nuit à l'accessibilité.

La propriété de contour est là pour une raison - fournir 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/

26
Boaz

C'est une préoccupation commune.

La valeur par défaut contour 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 communément recommandé est outline:none - qui, s'il est utilisé incorrectement - constitue un sinistre pour l'accessibilité.

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

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

Il fournit un retour visuel aux liens activés lors de la navigation dans un document Web à l'aide de la touche TAB (ou l'équivalent). Ceci est particulièrement utile pour les personnes qui ne peuvent pas utiliser une 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 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 savoir où est le focus 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 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>

Voyez comment il est plus difficile de déterminer où se situe le centre d'intérêt? Le seul signe révélateur est le curseur clignotant. Mon exemple ci-dessus est trop simpliste. Dans des situations réelles, il n'y aurait pas qu'un seul élément sur la page. Quelque chose de plus dans le sens de ceci.

.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 comparons 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 laids
  2. Les supprimer rend la vie plus difficile.

Alors, quelle est la réponse?

Supprimez le contour moche et ajoutez vos propres repères visuels pour indiquer le focus.

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 : actif . Je supprime également les bordures par défaut en haut, à gauche et à droite en les plaçant en transparence 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>

Nous essayons donc l'approche ci-dessus avec notre exemple "réel" 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>

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 complètement comme Materialise

Vous pouvez vous retrouver avec quelque chose qui n'est pas laid 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>
11
I haz kode

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 l'enlever, je devais 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;
}
8
Rikard Askelöf

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

J'espère que ça aide!

4
1010

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

Le meilleur compromis que j'ai trouvé consiste donc à afficher les styles de contour uniquement lorsque nous détectons que l'utilisateur utilise le clavier pour naviguer. Fondamentalement, si l'utilisateur appuie sur TAB, nous affichons les contours et s'il utilise la souris, nous les masquons.

Cela ne vous empêche pas d'écrire des styles de focus personnalisés pour certains éléments, mais au moins, cela 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/>
4
Tom Esterez

J'ai essayé toutes les réponses et je ne pouvais toujours pas faire fonctionner la mienne Mobile, jusqu'à ce que j'ai trouvé -webkit-tap-highlight-color.

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

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

Utilisez ce code:

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

Aucune des solutions ne fonctionnait pour moi dans Firefox.

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

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

Bordure pointillée (bordure 2px pointillée rouge): Dashed border. border 2px dashed red

Pas de frontière! (border 0px):
No border. border:0px

Bordure Textarea (bordure 1px gris uni): Textarea border. border 1px solid gray

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

Vous pouvez essayer aussi

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

ou

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

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

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

Essayez ceci 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;

}
0
Kondal

Supprimez le contour lorsque l'élément est mis en évidence, à l'aide de la propriété CSS ci-dessous:

input:focus {
    outline: 0;
}

Cette propriété CSS supprime le contour de tous les champs de saisie activés 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é.

0
Shailesh