Chrome의 자동 완성 글꼴 변경 과제 극복

Windows에서 Chrome의 자동 완성 기능을 사용하면 성가신 글꼴 변경 문제가 발생할 수 있습니다. 저장된 사용자 이름 위로 마우스를 가져가면 글꼴 크기와 스타일이 변경되어 양식 정렬이 중단됩니다. 이 문제를 완화하기 위해 입력에 고정 너비를 적용할 수 있지만 보다 효과적인 해결책은 글꼴 변경을 완전히 방지하는 것입니다.

이를 달성하려면 :-webkit-autofill을 특별히 대상으로 하는 CSS 규칙을 활용할 수 있습니다. 의사급. 이 의사 클래스는 Chrome의 비밀번호 관리자가 자동으로 채우는 양식 영역에 적용됩니다. 이 규칙 내의 글꼴 모음 속성에 중요 항목을 적용하면 Chrome의 기본 동작을 재정의하고 원하는 글꼴 설정을 유지할 수 있습니다.

다음은 SCSS에서 이를 구현하는 방법에 대한 예입니다.

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

또는 다음 규칙만 요구할 수도 있습니다.

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

:first-line 의사 요소는 일반적으로 자동 완성이 발생하는 입력의 첫 번째 줄을 대상으로 합니다.

이러한 CSS 규칙을 통합하면 Chrome의 자동 완성을 효과적으로 방지할 수 있습니다. 로그인 양식의 정렬과 미학을 유지하면서 글꼴을 변경합니다.