Question Comment supprimer la surbrillance de bordure sur un élément de texte en entrée


Quand un élément html est 'focus' (actuellement sélectionné / onglets sur), de nombreux navigateurs (au moins Safari et Chrome) mettront une bordure bleue autour de lui.

Pour la mise en page sur laquelle je travaille, c'est distrayant et cela ne semble pas correct.

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

FireFox ne semble pas le faire, ou du moins, me laisse le contrôler avec

border: x;

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

Mais obtenir Safari pour enlever ce petit peu de flare serait bien.

Merci


464
2017-09-22 02:22


origine


Réponses:


Dans votre cas, essayez:

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

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

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

Dans les commentaires, Noah Whitmore suggéré de prendre cela encore plus pour soutenir les éléments qui ont le contenteditable attribut défini sur true (ce qui en fait effectivement 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 recommande pas, pour être complet, vous pouvez toujours désactiver le contour de la mise au point sur tout avec ça:

*:focus {
    outline: none;
}

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


877
2017-09-22 03:27



Pour le supprimer de toutes les entrées

input {
 outline:none;
}

52
2018-03-23 15:06



Il s'agit d'un ancien thread, 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 de lecture et des sources supplémentaires sur ce sujet, voir http://outlinenone.com/


20
2017-12-30 13:29



Utilisez ce code:

input:focus {
    outline: 0;
}

6
2018-05-22 20:35



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

*:focus {
outline: none;
}

Cela va supprimer la bordure bleue!

Ceci est un exemple de travail: JSfiddle.net

J'espère que cela aide!


6
2018-02-23 01:38



Ceci est une préoccupation commune.

Le défaut contour que les navigateurs rendent est laid.

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>


La "solution" la plus courante que le plus recommande est outline:none - qui, si mal utilisé, est un désastre pour l'accessibilité.


Alors ... de quelle utilisation est le contour de toute façon?

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

Il fournit un retour visuel pour les liens qui ont "focus" quand   naviguer dans un document Web en utilisant la touche TAB (ou équivalent). C'est   particulièrement utile pour les personnes qui ne peuvent pas utiliser une souris ou avoir un visuel   dépréciation. Si vous supprimez le contour que vous faites de votre site   inaccessible pour ces personnes.

Ok, essayons le même exemple que ci-dessus, maintenant utilisez le TAB touche 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 déterminer où se concentre même sans cliquer sur l'entrée?

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

Donc, encore une fois, utilisez le TAB clé 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 concentre le sujet? Le seul signe révélateur est le clignotement du curseur. 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 ce sens.

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

Nous avons donc établi ce qui suit

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

Alors, quelle est la réponse?

Supprimez 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 ajoute une bordure inférieure :concentrer et :actif. Je supprime également les bordures par défaut en haut, à gauche et à droite en les réglant sur transparent :concentrer 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 début:

.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 plus loin en utilisant des bibliothèques externes qui s'appuient sur l'idée de modifier le "contour" par opposition à l'enlever entièrement comme Se concrétiser

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>


6
2017-08-24 11:45



Vous pouvez essayer cela aussi

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

ou

.classname input{
outline-style: none;
}

3
2017-12-16 06:17



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

input:focus {
    outline: 0;
}

Cette propriété CSS supprime le contour de tous les champs de saisie mis en évidence ou utilise la pseudo-classe 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é.


2
2017-12-10 06:24