web-dev-qa-db-fra.com

Comment supprimer la bordure de mise au point (contour) autour des zones de texte / de saisie? (Chrome)

Quelqu'un peut-il expliquer comment supprimer la bordure orange ou bleue (contour) entourant les zones de texte/de saisie? Je pense que cela ne se produit que sur Chrome pour indiquer que la zone de saisie est active. Voici le CSS d'entrée que j'utilise:

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

enter image description here

cssgoogle-chromeinputfocusborder
1161
Joey Morani

Cette bordure sert à montrer que l’élément est focalisé (c’est-à-dire que vous pouvez taper l’entrée ou appuyer sur le bouton avec Entrée). Vous pouvez l'enlever, cependant:

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

Vous voudrez peut-être ajouter un autre moyen pour que les utilisateurs sachent quel élément a le focus clavier, pour plus de facilité d'utilisation.

Chrome appliquera également la surbrillance à d'autres éléments tels que les DIV utilisés en tant que modaux. Pour empêcher la surbrillance de ces éléments et de tous les autres éléments, vous pouvez effectuer les opérations suivantes:

*:focus {
    outline: none;
}
2096
CEich

La réponse actuelle ne fonctionnait pas pour moi avec Bootstrap 3.1.1. Voici ce que je devais annuler:

.form-control:focus {
  border-color: inherit;
  -webkit-box-shadow: none;
  box-shadow: none;
}
145
gwintrob
input:focus {
    outline:none;
}

Cela fera l'affaire. Le contour orange ne sera plus visible.

91
azram19
<input style="border:none" >

A bien fonctionné pour moi. Souhait le faire réparer en HTML lui-même ... :)

61
Kailas

J'ai trouvé la solution.
J'ai utilisé: outline:none; dans le CSS et cela semble avoir fonctionné. Merci pour l'aide quand même. :)

38
Joey Morani

Solution

*:focus {
    outline: 0;
}

PS: Utilisez outline:0 au lieu de outline:none à la mise au point. C'est valide et meilleure pratique.

25
Touhid Rahman

cela supprime le cadre orange dans chrome de tout élément, peu importe ce qu'il est et où il se trouve

*:focus {
    outline: none;
}
22
nonamehere

Veuillez utiliser la syntaxe suivante pour supprimer la bordure de la zone de texte et supprimer la bordure en surbrillance du style de navigateur.

input {
    background-color:transparent;
    border: 0px solid;
    height:30px;
    width:260px;
}
input:focus {
    outline:none;
}
16
Tabish

Ensemble

input:focus{
    outline: 0 none;
}

"! important" est juste au cas où. Ce n'est pas nécessaire. [Et maintenant c'est parti. –Ed.]

12
madd

Cela fonctionnera certainement. Le contour orange ne sera plus visible. Commun pour toutes les balises:

*:focus {
    outline: none;
}

Spécifique à certaines balises, ex: balise input

input:focus {
   outline:none;
}
11
Prashant Gupta

J'ai découvert que vous pouvez aussi utiliser:

input:focus{
   border: transparent;
}
11
Refilon