Comment supprimer la surbrillance de la bordure d'un élément de texte à saisir ?

Question

Lorsqu'un élément HTML est "focalisé" (sélectionné ou dans lequel on navigue), de nombreux navigateurs (au moins Safari et Chrome) l'entourent d'une bordure bleue.

Pour la mise en page sur laquelle je travaille, c'est une source de distraction et cela 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 laisse le contrôler avec :

border: x;

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

Ce serait bien que Safari puisse supprimer cette petite touche de fantaisie.

Answer 1

Dans Bootstrap 4, pour supprimer le contour de la bordure, vous pouvez utiliser shadow-none il supprimera le contour de la mise au point.

            <div class="form-group">
                <label for="exampleInputEmail1">Name</label>
                <input type="text" class="form-control form-control shadow-none" 
                id="exampleInputEmail1"aria-describedby="emailHelp">
            </div>

Answer 2

La zone de texte sur le focus peut avoir ombre de la boîte ..

textarea:focus{
    outline: none!important;
    box-shadow: none!important;
}

Answer 3

Utilisez ce code :

input:focus {
    outline: 0;
}

Answer 4

Vous pouvez également essayer ceci

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

ou

.classname input{
outline-style: none;
}

Answer 5

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

La solution suivante modifie le style de la bordure en cas de mise au point pour Firefox et définit le contour sur aucun pour les autres navigateurs.

J'ai effectivement fait en sorte que la bordure du focus passe d'un éclat bleu de 3px à un style de bordure qui correspond à la bordure de la zone de texte. Voici quelques styles de bordure :

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

Pas de bordure ! (bordure 0px) :

Bordure de la zone de texte (bordure 1px gris solide) :

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>