Chrome의 자동 완성으로 인해 글꼴이 변경되는 것을 방지하는 방법은 무엇입니까?

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의 자동 완성 글꼴 변경을 효과적으로 방지하여 로그인 양식의 정렬과 미학을 보존할 수 있습니다.

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