Chrome의 자동 완성이 입력 필드 글꼴을 변경하는 것을 중지하는 방법은 무엇입니까?

입력 필드에서 Chrome의 자동 채우기로 인한 글꼴 변경 방지

Windows의 Chrome 사용자는 로그인 양식을 자동 채울 때 특이한 불편함을 겪을 수 있습니다. 저장된 사용자 이름 위로 마우스를 가져가면 사용자 이름 또는 비밀번호 입력 내용이 변경됩니다. 사소해 보이는 이 문제는 양식 요소의 정렬을 방해할 수 있습니다.

이 글꼴 변경을 방지하기 위해 일부는 입력 필드에 고정 너비를 설정하는 방법을 사용할 수 있지만 이는 문제를 해결하기보다는 가릴 뿐입니다. 더 바람직한 해결책은 소스에서 글꼴 변경을 제거하는 것입니다.

안타깝게도 :-webkit-autofill을 사용하여 입력 필드를 대상으로 지정하고 글꼴 관련 속성에 !important를 설정하는 것과 같은 기존 CSS 기술이 입증되었습니다. 이 경우에는 효과가 없습니다.

그러나 영리한 해결 방법이 발견되었습니다.

input {
  &:-webkit-autofill::first-line,
  &:-webkit-autofill,
  &:-webkit-autofill:hover,
  &:-webkit-autofill:focus,
  &:-webkit-autofill:active {
    font-family: Times, "Times New Roman", serif !important;
  }
}

이 CSS 규칙은 특히 자동 완성 입력 필드 내에서 렌더링된 텍스트의 첫 번째 줄을 대상으로 하여 원하는 글꼴은 자동 채우기 중에도 적용됩니다.

이 솔루션을 구현하면 개발자는 Chrome의 자동 채우기 메커니즘으로 인해 원치 않는 글꼴 변경이 발생하는 것을 방지하고 로그인 양식의 무결성을 복원할 수 있습니다.

위 내용은 Chrome의 자동 완성이 입력 필드 글꼴을 변경하는 것을 중지하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!