Làm nổi bật các trường được trình duyệt tự động điền mà người dùng chưa chỉnh sửa bằng CSS :autofill

Tính năng web: :autofill

Sử dụng CSS :autofill để làm nổi bật các trường đã (hoặc chưa) được tự động điền, nhằm giúp hướng dẫn người dùng hoàn tất biểu mẫu thành công.

Cách triển khai

Để làm nổi bật một trường biểu mẫu đã được trình duyệt tự động điền (và không được người dùng chỉnh sửa), hãy thêm một bộ chọn vào CSS của bạn bằng lớp :autofill. Bạn có thể dùng thuộc tính này cho phần tử <input>, <select> hoặc <textarea>.

Khi tạo kiểu cho trạng thái tự động điền, bạn phải tuân thủ các phương pháp hay nhất về hỗ trợ tiếp cận:

  • Nhiều chỉ báo trạng thái: Đừng chỉ dựa vào màu đường viền để cho biết trạng thái tự động điền. Sử dụng nhiều chỉ báo như độ dày đường viền và bóng nền tuỳ chỉnh để đảm bảo trạng thái có thể nhận biết được.
  • Giữ nguyên chỉ báo tiêu điểm: Đừng bao giờ xoá đường viền tiêu điểm (outline: none) mà không cung cấp một đường viền thay thế rõ ràng, có độ tương phản cao cho người dùng bàn phím.

Ví dụ sau đây sử dụng :autofill để đặt đường viền và nền tuỳ chỉnh, cùng với các kiểu lấy tiêu điểm rõ ràng:

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;
}

Như trong ví dụ này, thuộc tính box-shadow được dùng để tuỳ chỉnh nền, vì không thể ghi đè trực tiếp background-color trên các trường được tự động điền.

Sử dụng đúng tên lớp giả CSS

Không sử dụng :auto-fill: cách này không chính xác.

BẮT BUỘC: Sử dụng :autofill vì đây là tên lớp giả chính xác.

Chiến lược dự phòng

Lớp giả :autofill là một tính năng cải tiến tăng dần. Trong các trình duyệt không hỗ trợ, biểu mẫu vẫn hoạt động bình thường, nhưng dữ liệu đầu vào sẽ không nhận được tính năng làm nổi bật tự động điền tuỳ chỉnh. Người dùng vẫn có thể hoàn tất biểu mẫu. Không nên sử dụng phương án dự phòng JavaScript bổ sung.