브라우저 양식 자동 완성 및 입력 강조 표시를 어떻게 재정의할 수 있습니까?

브라우저 양식 채우기 및 입력 강조 무시

배경

사용자는 두 가지 양식의 양식 자동 채우기 및 입력 강조 표시와 관련된 문제에 직면합니다. 동일한 페이지로 인해 원치 않는 동작 및 시각적 현상이 발생함

해결책

브라우저의 기본 스타일과 자동 채우기를 무시하려면 효과적인 방법은 -webkit-autofill 가상 클래스를 사용하는 것입니다. 이를 통해 브라우저에서 자동으로 채워지는 양식 요소의 모양을 제어할 수 있습니다.

자동 채우기 방지

양식 필드가 자동으로 채워지는 것을 방지하려면 , 페이지 로드 시 배경 그림자를 트리거하여 필드가 이미 있다고 믿도록 브라우저를 효과적으로 속일 수 있습니다. 채워져 있습니다.

input:-webkit-autofill {
    -webkit-box-shadow:0 0 0 50px white inset;
    -webkit-text-fill-color: #333;
}

참고: 이 방법은 최신 버전의 Chrome에서는 더 이상 작동하지 않습니다.

입력 강조 표시 제거

입력 필드에 초점을 맞출 때 노란색 배경 강조 표시를 제거하려면 -webkit-box-shadow 속성을 다시 사용하여 브라우저의 기본 스타일.

input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 50px white inset;
    -webkit-text-fill-color: #333;
}

이러한 CSS 규칙을 구현하면 브라우저 자동 채우기를 효과적으로 비활성화하고 양식 입력의 시각적 모양을 제어하여 일관되고 원하는 사용자 경험을 얻을 수 있습니다.

위 내용은 브라우저 양식 자동 완성 및 입력 강조 표시를 어떻게 재정의할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!