web-dev-qa-db-fra.com

CSS - Supprimer le surlignage actif du champ de saisie

En utilisant uniquement html et css, comment désactiver la couleur de surbrillance bleue (dans Firefox) autour d’un champ de saisie actif. J'ai essayé d'utiliser input {outline:none;} mais sans succès .Merci de l'aide! =)

ok, ignorant le code précédent sur le contour, j'ai choisi la mauvaise propriété à changer. Ce que j'essaie d’obtenir, c’est de supprimer simplement la surbrillance (quel que soit le navigateur, c’est la bordure en gras et colorée qui apparaît) autour d’un champ de saisie de formulaire actif, sans modifier ni désactiver le style. Merci =)

cssinput-field
21
Kizer Yakuza

Vous devez utiliser: focus déclaration . Dans ce cas:

input:focus {outline:none;}

Toutes les entrées de votre projet n'auront pas de bordure bleue.

Si vous voulez un attribut spécifique, utilisez ceci:

input[type=text]:focus {outline:none;}

J'espère que ça aide. =)

20
Paula Fleck

Voir ce violon .

Il semble que vous deviez définir une propriété border pour que outline: none fonctionne. Si vous commentez dans la directive sur les frontières, le contour disparaît.

16
ohcibi
input {border:0; outline:none;}

devrait supprimer toutes les bordures/contours. 

7
Alex Shesterov

La réponse est plus simple que celle que j'ai mentionnée:

box-shadow:none;
6
Jason Slade

Edit: ma solution était trop compliquée. C'est simple comme ça:

input:focus {
  outline: none;
}

Vous devez cibler l'état: focus.

1
Azragh

Pour supprimer la surbrillance, essayez d’ajouter cette règle aux champs de saisie:

-moz-appearance:none;

Cela peut également être fait pour les navigateurs WebKit utilisant le préfixe correspondant:

-webkit-appearance:none;

Cela devrait s’occuper des frontières, des contours, etc. en utilisant une seule propriété CSS . Pour les navigateurs autres que la paire WebKit et Firefox - Opera et IE, il est conseillé d’inclure également les propriétés border et outline compatibilité croisée du navigateur.

0
Blieque
button {
    -webkit-tap-highlight-color:transparent;
    -moz-tap-highlight-color:transparent;
    -o-tap-highlight-color:transparent;
    tap-highlight-color:transparent;
}
0
quas