Discussion :

[samgi]

Bonjour,
j'applique le CSS suivant sur un input de type text afin d'avoir une image à droite de la zone de saisie pour m'indiquer que celle-ci est valide:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
 
input[type="text"]:valid {
    border : solid 2px green;
    background-image:  url("../images/yes.png") !important;
    background-position: right top;
    background-repeat: no-repeat;
}

et voici mon input avec un pattern et champ obligatoire :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
<input type="text" class="form-control" id="idNom" 
                           name="nom" pattern="[A-Za-z]{6,}" required="" />

Lorsque je saisie les infos dans mon input lettre après lettre (Par exemple Tototo) tous va bien mon image s'affiche et m'indique que la saisie est valide.

Par contre si je fais une saisie automatique à partir des infos déjà rempli (Tototo est maintenant dans la liste) mon image ne s'affiche plus, et j'ai bien la bordure verte qui est bien présente.

Voilà mon soucis. Merci par avance pour votre aide.

[mathieu]

je ne vois pas ce souci avec la dernière version de firefox, vous avez essayé avec quels navigateurs ?
https://codesandbox.io/s/intelligent...src/styles.css

[samgi]

Bonjour, merci pour ta réponse.

En réalité le problème se pose sur chrome uniquement. Testé sur Firefox et edge pas de problème.
Voici ce que j'inspecte sur chrome : voir photo :



1er screen : la saisie automatique est activé sur chrome. Sans saisie automatique pas de soucis ça fonctionne bien puisque je saisie tous.
2ème screen : le background-image n'est pas prise en compte.
3ème screen : un css user-agent prend la priorité. Propriété input:-internal-autofill-selected