ไฮไลต์ช่องที่เบราว์เซอร์ป้อนข้อความอัตโนมัติซึ่งผู้ใช้ยังไม่ได้แก้ไขด้วย 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 สำรองเพิ่มเติม