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

Vous pouvez supprimer la bordure (contour) orange ou bleue autour des zones de texte/de saisie en utilisant : outline:none

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

Answer 2

Essayez ce css, il fonctionne pour moi

textarea:focus, input:focus{ border: none; }

Answer 3

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 de saisie lorsqu'ils sont activés ou utilise une pseudo-classe pour supprimer le contour d'un é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é.

Answer 4

Essayez ça :

*:focus {
    outline: none;
}

Cela affecterait toutes vos pages.