Gunakan :autofill CSS untuk menandai kolom yang telah (atau belum) diisi otomatis, untuk membantu memandu pengguna agar berhasil menyelesaikan pengisian formulir.
Cara menerapkan
Untuk menandai kolom formulir yang telah diisi otomatis oleh browser (dan tidak diedit oleh pengguna), tambahkan pemilih ke CSS Anda menggunakan class :autofill. Atribut ini dapat digunakan untuk elemen <input>, <select>, atau <textarea>.
Saat menata gaya status yang diisi otomatis, Anda harus mematuhi praktik terbaik aksesibilitas:
- Beberapa Indikator Status: Jangan hanya mengandalkan warna batas untuk menunjukkan status isi otomatis. Gunakan beberapa indikator seperti ketebalan batas dan bayangan latar belakang kustom untuk memastikan status dapat dilihat.
- Pertahankan Indikator Fokus: Jangan pernah menghapus garis batas fokus (
outline: none) tanpa memberikan pengganti yang jelas dan kontras tinggi untuk pengguna keyboard.
Contoh berikut menggunakan :autofill untuk menetapkan batas dan latar belakang kustom, beserta gaya fokus eksplisit:
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;
}
Seperti yang ditunjukkan dalam contoh ini, properti box-shadow digunakan untuk menyesuaikan latar belakang, karena background-color tidak dapat diganti secara langsung di kolom yang diisi otomatis.
Menggunakan nama class pseudo CSS yang benar
Jangan gunakan :auto-fill: ini salah.
MANDATORY: Use :autofill as this is the correct pseudo-class name.
Strategi penggantian
Pseudo-class :autofill adalah progressive enhancement. Di browser yang tidak mendukungnya, formulir akan tetap berfungsi seperti biasa, tetapi input tidak akan menerima penandaan isi otomatis kustom. Pengguna akan tetap dapat menyelesaikan formulir dengan berhasil. Tidak boleh menggunakan penggantian JavaScript tambahan.