تمييز الحقول التي تم ملؤها تلقائيًا في المتصفّح ولم يعدّلها المستخدم باستخدام CSS :autofill

استخدِم CSS :autofill لتمييز الحقول التي تم ملؤها تلقائيًا (أو لم يتم ملؤها)، للمساعدة في توجيه المستخدم إلى إكمال النموذج بنجاح.

كيفية الإعداد

لتمييز حقل نموذج تم ملؤه تلقائيًا بواسطة المتصفح (ولم يتم تعديله بواسطة المستخدم)، أضِف أداة اختيار إلى CSS باستخدام الفئة :autofill. ويمكن استخدامها مع العناصر <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: هذا غير صحيح.

MANDATORY: Use :autofill as this is the correct pseudo-class name.

استراتيجيات احتياطية

الفئة الصورية :autofill هي تحسين تدريجي. في المتصفّحات التي لا تتيح استخدام هذه الميزة، سيظل النموذج يعمل بشكل طبيعي، ولكن لن يتم تمييز حقول الإدخال التي تم ملؤها تلقائيًا. وسيظل بإمكان المستخدمين إكمال النموذج بنجاح. يجب عدم استخدام أي إجراء احتياطي إضافي في JavaScript.