Comment faire pour supprimer le point culminant de la frontière sur un élément de texte d'entrée

Question

Lorsqu'un élément HTML est « concentré » (actuellement sélectionné / onglets dans), de nombreux navigateurs (au moins Safari et Chrome) vont mettre une bordure bleue.

Pour la mise en page Je travaille, cela est source de distraction et ne regarde pas droit.

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

Firefox ne semble pas faire, ou du moins, me laisser contrôler avec:

border: x;

Si quelqu'un peut me dire comment IE exécute, je serais curieux.

Obtenir Safari pour enlever ce petit peu de fusée serait bien.

Answer 1

Dans votre cas, essayez:

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

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

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

---

Dans les commentaires, Noah Whitmore a suggéré de prendre encore plus loin pour soutenir les éléments qui ont l'attribut contenteditable mis à true (faire efficacement eux un type d'élément d'entrée). Les points suivants doivent cibler ceux aussi bien (en CSS3 navigateurs capables):

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

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

*:focus {
    outline: none;
}

Gardez à l'esprit que le contour de mise au point est une fonctionnalité d'accessibilité et de convivialité; il des indices l'utilisateur dans quel élément se concentre actuellement.

Answer 2

Pour retirer de toutes les entrées

input {
 outline:none;
}

Answer 3

Ceci est un vieux fil, 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é outline est là pour une raison - fournir aux utilisateurs une indication claire de la mise au point du clavier. Pour aller plus loin et d'autres sources sur ce sujet, voir http://outlinenone.com/

Answer 4

Ceci est une préoccupation commune.

La valeur par défaut qui rendent legende les navigateurs est laid.

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>

---

La « solution » la plus commune que la plupart recommandent est outline:none - qui si elle est utilisée de manière incorrecte - est une catastrophe pour l'accessibilité.

---

Alors ... de quoi est le contour de toute façon?

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

  

Il fournit une rétroaction visuelle 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 gens qui ne peuvent pas utiliser une souris ou avoir un visuel   perte de valeur. Si vous supprimez le contour que vous faites votre site   inaccessibles pour ces personnes.

Ok, nous allons l'essayer 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 dire où l'accent est même sans cliquer sur l'entrée?

Maintenant, nous allons essayer outline:none sur notre <input> fidèle

Alors, 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 savoir où l'accent est mis? Le signe que dire est le curseur clignotant. Mon exemple ci-dessus est trop simpliste. Dans des situations réelles, vous n'auriez pas un seul élément de la page. Quelque chose de plus le long des lignes de ce.

.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 que le même modèle si nous gardons les grandes lignes:

.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 mis en place les éléments suivants

1. Outlines sont laids
2. Leur suppression rend la vie plus difficile.

---

Alors, quelle est la réponse?

Supprimer le contour laid et ajouter vos propres repères visuels pour indiquer le focus.

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

Je supprimer le contour et une bordure inférieure sur : mise au point et : active . Je supprime également les frontières par défaut sur le dessus, les côtés gauche et droit en les mettant à la transparence sur : 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>

Alors, nous essayons de l'approche ci-dessus avec notre exemple « monde 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>

Ceci peut être étendu plus loin en utilisant les bibliothèques externes qui se fondent sur l'idée de modifier le « contour », par opposition à l'enlever tout comme matérialiser

Vous pouvez retrouver avec quelque chose qui 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>

Answer 5

Ce fut moi confusion pendant un certain temps jusqu'à ce que je découvre la ligne était ni une frontière ou un aperçu, il é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;
}

Answer 6

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

*:focus {
outline: none;
}

Ceci enlèvera la bordure bleue!

Ceci est un exemple de travail: JSfiddle.net

it helps!

Answer 7

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

Alors le meilleur compromis que j'ai trouvé est de montrer les styles de contour que lorsque nous constatons que l'utilisateur utilise le clavier pour naviguer. En fait, si l'utilisateur appuie sur TAB, nous montrons les contours et s'il utilise la souris, nous les cacher.

Il ne vous empêche pas d'écrire des styles de mise au point sur mesure 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/>

Answer 8

Utilisez ce code:

input:focus {
    outline: 0;
}

Answer 9

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

Alors, ce qui a fonctionné pour moi est ...

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

Answer 10

Aucune des solutions de travail pour moi dans Firefox.

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

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

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

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

frontière Textarea (frontière 1px de solide gris):

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>

Answer 11

Vous pouvez essayer aussi

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

ou

.classname input{
outline-style: none;
}

Answer 12

Supprimer 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 les grandes lignes de tous les champs d'entrée sur mise au point ou utiliser la pseudo-classe pour éliminer les contours 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é.

Answer 13

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;

}

Answer 14

Vous pouvez supprimer la bordure orange ou bleu (contour) autour de zones de texte / entrée en utilisant: aperçu: aucun

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