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

611

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.

css input safari webkit border user170579
la source

1101

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

Cᴏʀʏ
la source

10

Merci Cory, super astuce. Vous devez également affecter le CSS à la zone de texte pour couvrir tous les champs de saisie. input:focus, textarea:focus {outline: none;}

BaronGrivet

7

n'oubliez pas de sélectionner égalementselect:focus {outline:none;}

Geek Num 88

2

Il y a aussi la <button>balise, qui est utilisée par jQuery UI et Twitter Bootstrap, entre autres, donc j'ajouterais button: focusà la liste pour être complet.

Chris Parton

1

D'après mon expérience, cela peut se produire sans concentration, auquel cas je devais l'appliquer àbutton, button:focus { outline:none; }

Mike Lyons

1

@ Cᴏʀʏ cela vous dérangerait de déplacer la note sur a11y et la convivialité tout en haut de votre question? OMI, cela améliorerait considérablement votre réponse, car la suppression des fonctionnalités a11y est une mauvaise pratique.

Josef Engelfrost

64

Pour le supprimer de toutes les entrées

input {
 outline:none;
}

marcjae
la source

31

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/

Boaz - Rétablir Monica
la source

1

Boaz, FYI input.middle {contour: none} vous permettra toujours de parcourir les éléments (y compris input.middle). Appuyer sur la touche de tabulation se concentrera également sur la balise d'entrée. La seule chose est que vous ne pourrez pas voir la mise au point (mise au point de contour) sur elle. Donc ce n'est pas si dangereux de l'utiliser ..

:)

11

@AnishNair Only thing is that you won't be able to see the focus(outline focus) on it- et c'est exactement mon point. La suppression du contour désactive l' indication visuelle de l'événement de mise au point, et non l'événement réel. La suppression de l'indication visuelle signifie que vous compliquez la tâche des personnes handicapées qui dépendent de cette indication.

Boaz - Réintègre Monica le

2

Parfois, nous devons faire des compromis, afin de réaliser quelque chose

:)

6

@AnishNair True. Mais le plus souvent, les personnes qui lisent ce fil préféreraient la solution de facilité (c'est-à-dire outline:none;) sans tenir compte des implications. Tout simplement parce que quelque chose est facile et fait gagner du temps, cela ne signifie pas que c'est la meilleure pratique :)

Boaz - Rétablir Monica

5

Je suis en retard à la discussion, mais vous pouvez toujours styliser l'état focalisé des entrées (comme changer la couleur ou la largeur de la bordure). Tant que vous gardez à l'esprit l'accessibilité lorsque vous faites cela (bon contraste, etc.), c'est tout aussi accessible que les contours par défaut.

Meg

18

C'est une préoccupation commune.

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

Voir ceci par exemple:

Afficher l'extrait de code

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>

Développer l'extrait

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.

Afficher l'extrait de code

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>

Développer l'extrait

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.

Afficher l'extrait de code

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>

Développer l'extrait

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.

Afficher l'extrait de code

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

Développer l'extrait

Maintenant, comparez cela au même modèle si nous gardons le contour:

Afficher l'extrait de code

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

Développer l'extrait

Nous avons donc établi ce qui suit

Les contours sont moches
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)

Afficher l'extrait de code

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>

Développer l'extrait

Donc, nous essayons l'approche ci-dessus avec notre exemple "réel" du précédent:

Afficher l'extrait de code

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

Développer l'extrait

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

Afficher l'extrait de code

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>

Développer l'extrait

I haz kode
la source

18

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

Rikard Askelöf
la source

6

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!

1010
la source

4

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

Développer l'extrait

Tom Esterez
la source

Il s'agit d'une approche approfondie. L' clickauditeur est une belle touche.

Keith DC

4

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

Oneezy
la source

1

C'est la solution que je cherchais. Ceci est particulièrement utile lorsque vous êtes des expériences sur écran tactile avec des éléments comme li

Anand G

4

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

Ali Al Amine
la source

3

Utilisez ce code:

input:focus {
    outline: 0;
}

Touhid Rahman
la source

2

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>

Développer l'extrait

1,21 gigawatts
la source

1

Vous pouvez également essayer ceci

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

ou

.classname input{
outline-style: none;
}

Santosh Khalse
la source

1

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

Rizo
la source

0

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

Shailesh
la source

0

Essaye ça

*:focus {
    outline: none;
}

Cela affecterait tout au long de vos pages

subindas pm
la source

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

Réponses:

C'est une préoccupation commune.

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

Alors, quelle est la réponse?