Otrzymaliśmy miłą wskazówkę od Lydii Dugger za pośrednictwem poczty elektronicznej, opisującą metodę zmiany stylów stosowanych przez przeglądarki WebKit do pól formularzy, które zostały automatycznie uzupełnione.
Co rozumiemy przez autouzupełnianie
Wiele przeglądarek (w tym Chrome i Safari) udostępnia ustawienie, które umożliwia użytkownikom automatyczne wypełnianie danych w typowych polach formularzy. Widzieliście to podczas wypełniania formularza, który prosi o takie rzeczy, jak imię i nazwisko, adres i adres e-mail.
Problem polega na tym, że użytkownicy musieli włączyć to ustawienie, aby ten fragment kodu działał. Jeśli to ustawienie jest włączone, przeglądarki WebKit będą stylizować pola, które zostały automatycznie uzupełnione dla użytkownika, na przykład:
Zauważ, że automatycznie uzupełniane pola mają żółte tło? To jest to, do czego się odnosimy i co zmieni się w tym fragmencie.
Fragment
Możemy użyć -webkit-autofillpseudo-selektora, aby wskazać te pola i nadać im styl według własnego uznania. Domyślny styl wpływa tylko na kolor tła, ale ma tu zastosowanie większość innych właściwości, takich jak borderi font-size. Możemy nawet zmienić kolor tekstu za pomocą, -webkit-text-fill-colorktóry jest zawarty w poniższym fragmencie.
/* 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; )Próbny
Zobacz style autouzupełniania zmiany pióra w WebKit autorstwa CSS-Tricks (@ css-tricks) w CodePen.