Użyj CSS :autofill, aby wyróżnić pola, które zostały (lub nie zostały) wypełnione automatycznie, i pomóc użytkownikowi w prawidłowym wypełnieniu formularza.
Jak to zrobić?
Aby wyróżnić pole formularza, które zostało automatycznie wypełnione przez przeglądarkę (i nie zostało zmodyfikowane przez użytkownika), dodaj selektor do arkusza CSS, używając klasy :autofill. Można go używać w przypadku elementów <input>, <select> lub <textarea>.
Podczas stylizowania stanów autouzupełniania musisz przestrzegać sprawdzonych metod dotyczących ułatwień dostępu:
- Wiele wskaźników stanu: nie polegaj wyłącznie na kolorze obramowania, aby wskazać stan autouzupełniania. Użyj kilku wskaźników, takich jak grubość obramowania i niestandardowe cieniowanie tła, aby stan był widoczny.
- Zachowaj wskaźniki zaznaczenia: nigdy nie usuwaj obramowań zaznaczenia (
outline: none) bez zapewnienia wyraźnego, kontrastowego zamiennika dla użytkowników klawiatury.
W przykładzie poniżej użyto :autofill, aby ustawić niestandardowe obramowanie i tło oraz wyraźne style zaznaczenia:
input:autofill,
input:-webkit-autofill {
/* Multiple indicators: use both a distinct border and background color via box-shadow to avoid color-only state */
border: 2px solid #2e7d32;
box-shadow: 0 0 0 100vmax #e8f5e9 inset;
}
/* MANDATORY: Always provide an explicit focus indicator when styling autofilled states */
input:autofill:focus-visible,
input:-webkit-autofill:focus-visible {
outline: 3px solid #000;
outline-offset: 2px;
}
Jak pokazano w tym przykładzie, właściwość box-shadow służy do dostosowywania tła, ponieważ właściwości background-color nie można zastąpić bezpośrednio w polach autouzupełniania.
Użyj prawidłowej nazwy pseudoklasy CSS
Nie używaj :auto-fill: to nie jest prawidłowa odpowiedź.
OBOWIĄZKOWO: użyj :autofill, ponieważ jest to prawidłowa nazwa pseudoklasy.
Strategie zastępcze
Pseudoklasa :autofill to progresywne ulepszanie. W przeglądarkach, które nie obsługują tej funkcji, formularz będzie działać normalnie, ale pola nie będą wyróżniane niestandardowym kolorem autouzupełniania. Użytkownicy nadal będą mogli wypełnić formularz. Nie należy używać dodatkowego kodu JavaScript jako kreacji zastępczej.