Λάβαμε μια ωραία συμβουλή από τη Lydia Dugger μέσω email με μια μέθοδο για την αλλαγή των στυλ που εφαρμόζουν τα προγράμματα περιήγησης WebKit σε πεδία φόρμας που έχουν συμπληρωθεί αυτόματα.
Τι εννοούμε με την αυτόματη συμπλήρωση
Πολλά προγράμματα περιήγησης (συμπεριλαμβανομένων των Chrome και Safari) παρέχουν μια ρύθμιση που επιτρέπει στους χρήστες να συμπληρώνουν αυτόματα λεπτομέρειες για κοινά πεδία φόρμας. Το έχετε δει όταν συμπληρώνετε μια φόρμα που ζητά πράγματα όπως όνομα, διεύθυνση και email
Το πλεονέκτημα είναι ότι οι χρήστες πρέπει να έχουν ενεργοποιήσει αυτήν τη ρύθμιση για να είναι αποτελεσματικό αυτό το απόσπασμα. Εάν η ρύθμιση είναι ενεργοποιημένη, τότε τα προγράμματα περιήγησης WebKit θα διαμορφώσουν τα πεδία που έχει συμπληρώσει αυτόματα για τον χρήστη, όπως:
Παρατηρήστε πώς τα πεδία αυτόματης συμπλήρωσης έχουν κίτρινο φόντο; Αυτό αναφέρουμε και πρόκειται να αλλάξουμε με αυτό το απόσπασμα.
Το απόσπασμα
Μπορούμε να χρησιμοποιήσουμε τον -webkit-autofillψευδο-επιλογέα για να στοχεύσουμε αυτά τα πεδία και να τα ορίσουμε ανάλογα με τις ανάγκες μας. Το προεπιλεγμένο στυλ επηρεάζει μόνο το χρώμα του φόντου, αλλά οι περισσότερες άλλες ιδιότητες ισχύουν εδώ, όπως borderκαι font-size. Μπορούμε ακόμη και να αλλάξουμε το χρώμα του κειμένου χρησιμοποιώντας το -webkit-text-fill-colorοποίο περιλαμβάνεται στο παρακάτω απόσπασμα.
/* 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; )Διαδήλωση
Δείτε το Στυλό αλλαγής στυλ αυτόματης συμπλήρωσης στο WebKit από CSS-Tricks (@ css-tricks) στο CodePen.