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

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

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
la source

11 ответов

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 23:34:00
la source

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 07:43:55
la source
input:focus {
    outline:none;
}

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

83
répondu azram19 2015-12-14 03:31:51
la source
<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 14:42:00
la source

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 17:51:37
la source

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 06:31:32
la source

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-11 00:43:34
la source

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-07 01:45:22
la source

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

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

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 17:28:12
la source

ç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 03:32:13
la source

Autres questions sur css google-chrome input border