از CSS :autofill برای برجسته کردن فیلدهایی که تکمیل خودکار شده‌اند (یا نشده‌اند) استفاده کنید تا به کاربر کمک کنید فرم را با موفقیت تکمیل کند.
نحوه پیاده‌سازی
برای برجسته کردن فیلد فرمی که توسط مرورگر تکمیل خودکار شده است (و توسط کاربر ویرایش نشده است)، بااستفاده از کلاس :autofill، انتخابگری به CSS خود اضافه کنید. این می‌تواند برای عنصر <input>، <select>، یا <textarea> استفاده شود.
هنگام سبک‌دهی به حالت‌های تکمیل خودکار، باید از روال‌های مطلوب دسترس‌پذیری پیروی کنید:
- نشانگرهای چندحالتی: برای نشان دادن حالت تکمیل خودکار، فقط به رنگ حاشیه تکیه نکنید. از چندین نشانگر مانند ضخامت حاشیه و سایه‌زنی پس‌زمینه سفارشی استفاده کنید تا مطمئن شوید وضعیت قابل‌درک است.
- حفظ نشانگرهای تمرکز: هرگز طرح‌های کلی تمرکز (
outline: none) را بدون ارائه جایگزینی واضح و با کنتراست بالا برای کاربران صفحه‌کلید حذف نکنید.
مثال زیر از :autofill برای تنظیم حاشیه و پس‌زمینه سفارشی، همراه با سبک‌های تمرکز صریح استفاده می‌کند:
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;
}
همان‌طور که در این مثال نشان داده شده است، از ویژگی box-shadow برای سفارشی‌سازی پس‌زمینه استفاده می‌شود، زیرا background-color را نمی‌توان مستقیماً در فیلدهای تکمیل‌شده خودکار لغو کرد.
از نام کلاس کاذب CSS درست استفاده کنید
از :auto-fill استفاده نکنید: این نادرست است.
اجباری: از :autofill استفاده کنید چون نام کلاس کاذب صحیح است.
راهبردهای جایگزین
کلاس کاذب :autofill یک ارتقای پیش‌رو است. در مرورگرهایی که از آن پشتیبانی نمی‌کنند، فرم همچنان به‌طور عادی کار خواهد کرد، اما ورودی‌ها به‌سادگی برجسته‌سازی تکمیل خودکار سفارشی را دریافت نخواهند کرد. کاربران همچنان می‌توانند فرم را باموفقیت تکمیل کنند. نباید از جاوا اسکریپت جایگزین دیگری استفاده شود.