Abbiamo ricevuto un bel suggerimento da Lydia Dugger via e-mail con un metodo per modificare gli stili che i browser WebKit applicano ai campi modulo che sono stati completati automaticamente.
Cosa intendiamo per completamento automatico
Molti browser (inclusi Chrome e Safari) forniscono un'impostazione che consente agli utenti di compilare automaticamente i dettagli per i campi dei moduli comuni. Hai visto questo quando hai completato un modulo che richiede cose come nome, indirizzo ed e-mail.
Il problema è che gli utenti devono aver abilitato questa impostazione affinché questo snippet sia efficace. Se l'impostazione è abilitata, i browser WebKit definiranno i campi che ha completato automaticamente per l'utente, in questo modo:
Notate come i campi autocompletati abbiano uno sfondo giallo? Questo è ciò a cui ci riferiamo e cambieremo con questo snippet.
Lo snippet
Possiamo usare lo -webkit-autofillpseudo-selettore per indirizzare quei campi e modellarli come meglio crediamo. Lo stile predefinito influisce solo sul colore di sfondo, ma qui si applicano la maggior parte delle altre proprietà, come bordere font-size. Possiamo anche cambiare il colore del testo usando -webkit-text-fill-colorche è incluso nello snippet qui sotto.
/* 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; )Demo
Vedi gli stili di completamento automatico della modifica della penna in WebKit di CSS-Tricks (@ css-tricks) su CodePen.
