Comment supprimer la bordure (contour) autour des zones de texte/entrée? (Chrome) [dupliquer]

cette question a déjà une réponse ici:

  • comment supprimer le surligneur de bordure sur un élément de texte d'entrée 14 réponses

est-ce que quelqu'un peut expliquer comment enlever la bordure orange ou bleue (contour) autour des zones texte/entrée? Je pense qu'il arrive seulement sur Chrome pour montrer que le la boîte de saisie est active. Voici L'entrée CSS que j'utilise:

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

enter image description here

995
demandé sur Cyral 2010-08-03 17:49:03

11 réponses

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

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

vous pouvez ajouter une autre façon pour les utilisateurs de savoir quel élément a la mise au point du clavier mais pour la convivialité.

Chrome s'appliquera également à la mise en évidence d'autres éléments tels que les DIV utilisés comme modaux. Pour empêcher la mise en évidence sur ceux-ci et tous les autres éléments ainsi, vous pouvez do:

*:focus {
    outline: none;
}
1855
répondu CEich 2016-01-05 20:34:00

la réponse actuelle n'a pas fonctionné pour moi avec Bootstrap 3.1.1. Voici ce que j'ai dû annuler:

.form-control:focus {
  border-color: inherit;
  -webkit-box-shadow: none;
  box-shadow: none;
}
102
répondu gwintrob 2014-02-21 03:43:55
input:focus {
    outline:none;
}

ça ira. Le contour Orange n'apparaîtra plus.

83
répondu azram19 2015-12-14 00:31:51
<input style="border:none" >

a bien Fonctionné pour moi. J'ai voulu le faire corriger en html lui-même ... :)

48
répondu Kailas 2018-09-03 11:42:00

j'ai trouvé la solution.

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

34
répondu Joey Morani 2010-08-03 13:51:37

Solution

*:focus {
    outline: 0;
}

PS: utiliser outline:0 au lieu de outline:none sur focus. Il valide et de meilleures pratiques.

23
répondu Touhid Rahman 2017-07-16 03:31:32

cela supprime le cadre orange en chrome de tous et de n'importe quel élément peu importe ce qu'il est et où est-il

*:focus {
    outline: none;
}
20
répondu nonamehere 2012-10-10 20:43:34

veuillez utiliser la syntaxe suivante pour supprimer la bordure de la zone de texte et supprimer la bordure surlignée du style du navigateur.

input {
    background-color:transparent;
    border: 0px solid;
    height:30px;
    width:260px;
}
input:focus {
    outline:none;
}
16
répondu Tabish 2013-08-06 21:45:22

j'ai découvert que vous pouvez également utiliser:

input:focus{
   border: transparent;
}
10
répondu Refilon 2015-05-06 13:27:09

Set

input:focus{
    outline: 0 none;
}

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

10
répondu madd 2015-09-15 14:28:12

ça va marcher. Le contour Orange n'apparaîtra plus.. Commun pour toutes les étiquettes:

*:focus {
    outline: none;
}

spécifique à une étiquette, ex: étiquette d'entrée

input:focus {
   outline:none;
}
9
répondu Prashant Gupta 2015-12-14 00:32:13