웹 기능:
:autofill
CSS :autofill를 사용하여 자동 완성된 필드 (또는 자동 완성되지 않은 필드)를 강조 표시하여 사용자가 양식을 성공적으로 작성하도록 안내합니다.
구현 방법
브라우저에서 자동 완성한 양식 입력란을 강조표시하려면 (사용자가 수정하지 않음) :autofill 클래스를 사용하여 CSS에 선택자를 추가합니다. <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 가상 클래스는 점진적 개선입니다. 이를 지원하지 않는 브라우저에서는 양식이 정상적으로 작동하지만 입력란에 맞춤 자동 완성 강조 표시가 적용되지 않습니다. 사용자는 양식을 정상적으로 작성할 수 있습니다. 추가 자바스크립트 대체는 사용하지 않아야 합니다.