Chrome 자동 완성 중 글꼴 변경을 방지하는 방법은 무엇입니까?

Chrome에서 자동 완성 중 글꼴 변경 방지

내장된 비밀번호 관리자를 사용하여 Windows의 Chrome에서 사용자 이름 및 비밀번호 필드를 자동 완성하면 글꼴이 변경되어 중단될 수 있습니다. 정렬. 이 문서의 목표는 글꼴 변경을 방지하는 수정 사항을 제공하는 것입니다.

-webkit-autofill 및 !important 태그를 사용하여 입력의 CSS를 수정하려고 시도했지만 글꼴 변경이 지속됩니다. 더 효과적인 해결책은 변경이 진행되는 입력의 특정 부분을 대상으로 하는 것입니다.

:first-line 의사 요소를 활용하면 자동 완성 입력 내에서 텍스트의 첫 번째 줄을 분리하고 수정할 수 있습니다. 다음 CSS 코드는 글꼴의 일관성을 유지합니다.

input {
  &:-webkit-autofill::first-line {
    font-family: Times, "Times New Roman", serif !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 중국어 웹사이트의 기타 관련 기사를 참조하세요!