Nous avons reçu un bon conseil de Lydia Dugger par e-mail avec une méthode pour changer les styles que les navigateurs WebKit appliquent aux champs de formulaire qui ont été remplis automatiquement.
Ce que nous entendons par saisie semi-automatique
De nombreux navigateurs (y compris Chrome et Safari) fournissent un paramètre qui permet aux utilisateurs de renseigner automatiquement les détails des champs de formulaire courants. Vous l'avez vu en remplissant un formulaire qui demande des éléments tels que le nom, l'adresse et l'adresse e-mail.
Le hic, c'est que les utilisateurs doivent avoir activé ce paramètre pour que cet extrait de code soit efficace. Si le paramètre est activé, les navigateurs WebKit styliseront les champs qu'il a remplis automatiquement pour l'utilisateur, comme ceci:
Remarquez comment les champs remplis automatiquement ont un arrière-plan jaune? C'est ce à quoi nous faisons référence et que nous allons changer avec cet extrait.
L'extrait
Nous pouvons utiliser le -webkit-autofillpseudo-sélecteur pour cibler ces champs et les styliser comme bon nous semble. Le style par défaut affecte uniquement la couleur d'arrière-plan, mais la plupart des autres propriétés s'appliquent ici, telles que borderet font-size. Nous pouvons même changer la couleur du texte en utilisant -webkit-text-fill-colorce qui est inclus dans l'extrait ci-dessous.
/* Change Autocomplete styles in Chrome*/ input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, textarea:-webkit-autofill, textarea:-webkit-autofill:hover, textarea:-webkit-autofill:focus, select:-webkit-autofill, select:-webkit-autofill:hover, select:-webkit-autofill:focus ( border: 1px solid green; -webkit-text-fill-color: green; -webkit-box-shadow: 0 0 0px 1000px #000 inset; transition: background-color 5000s ease-in-out 0s; )Démo
Voir les styles de saisie semi-automatique de changement de stylo dans WebKit par CSS-Tricks (@ css-tricks) sur CodePen.