27799 sujets

CSS et mise en forme, CSS3

Bonjour à tous et bonne rentrée Smiley cligne

Vous connaissez :-webkit-autofill ? Cette auto-complétion de Chrome modifie le background d'un input de formulaire ainsi que la couleur. Sur presque tous les sites - stackoverflow en tête - on propose une modification telle que celle-ci :
input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px white inset !important;
}

Bien entendu, cela ne fonctionne pas chez moi, sinon je n'aurais pas recours à vous. C'est peut-être dû au fait que dans ce cas-là il ne faut pas utiliser la règle background-image, mais que j'emploie quand-même pour certains types d'inputs.

Pour vous donner une idée de mon problème, voici un pen prototype dans lequel j'ai placé deux champs fortement susceptibles d'être auto-complétés par votre navigateur : CodePen

En attendant j'ai quand même trouvée une solution qui fonctionne... pas très jolie :
:-webkit-autofill {
  -webkit-text-fill-color: #000; /* ça c'est ok */
  transition-property: background-color; /* il est là le hack... */
  transition-delay: 100000s; /* ...et là aussi */
}

Modifié par Olivier C (02 Sep 2021 - 09:39)