הדגשת שדות שמולאו אוטומטית בדפדפן והמשתמש לא ערך אותם באמצעות CSS :autofill

תכונות באינטרנט: :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: זה לא נכון.

חובה: צריך להשתמש ב-:autofill כי זה השם הנכון של מחלקת הפסאודו.

אסטרטגיות חלופיות

המחלקה המדומה :autofill היא שיפור הדרגתי (progressive enhancement). בדפדפנים שלא תומכים בזה, הטופס עדיין יפעל כרגיל, אבל פשוט לא תהיה הדגשה בהתאמה אישית של המילוי האוטומטי בשדות הקלט. המשתמשים עדיין יוכלו למלא את הטופס בהצלחה. אין להשתמש ב-JavaScript נוסף כחלופה.