Mēs saņēmām jauku padomu no Lydia Dugger pa e-pastu ar metodi, kā mainīt stilus, kurus WebKit pārlūkprogrammas piemēro automātiski aizpildītiem formu laukiem.
Ko mēs domājam ar automātisko pabeigšanu
Daudzās pārlūkprogrammās (ieskaitot Chrome un Safari) ir iestatījums, kas ļauj lietotājiem automātiski aizpildīt detalizētu informāciju par kopējiem veidlapu laukiem. Jūs to redzējāt, aizpildot veidlapu, kurā tiek prasīts, piemēram, vārds, adrese un e-pasts.
Nozīme ir tāda, ka lietotājiem jābūt iespējotiem šim iestatījumam, lai šis fragments būtu efektīvs. Ja iestatījums ir iespējots, WebKit pārlūkprogrammas veidos laukus, kurus tas ir automātiski aizpildījis lietotājam, piemēram:
Ievērojiet, kā automātiski aizpildītajiem laukiem ir dzeltens fons? Tas ir tas, uz ko mēs atsaucamies un ar šo fragmentu mainīsimies.
Fragments
Mēs varam izmantot -webkit-autofillpseido selektoru, lai mērķētu uz šiem laukiem un veidotu tos pēc saviem ieskatiem. Noklusējuma stils ietekmē tikai fona krāsu, taču šeit tiek piemērota lielākā daļa citu īpašību, piemēram, borderun font-size. Mēs pat varam mainīt teksta krāsu, izmantojot to, -webkit-text-fill-colorkas ir iekļauts zemāk esošajā fragmentā.
/* 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; )Demonstrācija
Skatiet CSS-Tricks (@ css-tricks) WebKit automātiskās pabeigšanas stilu pildspalvas mainīšanu vietnē CodePen.