Question Comment enlever la bordure (contour) autour des boîtes de texte / d'entrée? (Chrome) [dupliquer]


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

Quelqu'un peut-il expliquer comment supprimer la bordure orange ou bleue (contour) autour des zones de texte / saisie? Je pense qu'il ne se passe que sur Chrome pour montrer que 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


970
2017-08-03 13:49


origine


Réponses:


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

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

Vous voudrez peut-être ajouter un autre moyen pour les utilisateurs de savoir quel élément a le focus clavier pour la convivialité.

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

*:focus {
    outline: none;
}

1809
2017-08-03 13:52



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

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

99
2018-02-21 03:43



input:focus {
    outline:none;
}

Cela fera l'affaire. Le contour orange ne s'affichera plus.


83
2017-08-03 13:52



<input style="border:none" >

Travaillé bien pour moi. Je voulais l'avoir fixé en html lui-même ... :)


45
2017-10-08 07:26



J'ai trouvé la solution.
J'ai utilisé: outline:none; dans le CSS et il semble avoir travaillé. Merci pour l'aide de toute façon. :)


34
2017-08-03 13:51



Solution

*:focus {
    outline: 0;
}

PS: Utilisation outline:0 au lieu de outline:none sur la mise au point. C'est une pratique valable et meilleure.


22
2018-05-23 09:55



ce supprimer le cadre orange en chrome de tout et n'importe quel élément, peu importe quoi et où est-il

*:focus {
    outline: none;
}

19
2017-10-10 20:43



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
2018-05-08 08:55