>웹 프론트엔드 >CSS 튜토리얼 >Google 크롬 자동완성 기능의 노란색 배경을 제거하거나 사용자 정의하려면 어떻게 해야 합니까?

Google 크롬 자동완성 기능의 노란색 배경을 제거하거나 사용자 정의하려면 어떻게 해야 합니까?

Barbara Streisand
Barbara Streisand원래의
2024-12-11 01:50:10835검색

How Can I Remove or Customize the Yellow Background of Google Chrome's Autofill Feature?

Google 크롬 자동 완성 배경: 디자인 수수께끼

Google 크롬의 자동 완성 기능은 저장된 로그인 및 비밀번호로 양식을 빠르게 작성할 수 있는 편리한 도구입니다. . 그러나 일부 사용자는 Chrome이 필드를 자동 완성할 때 나타나는 노란색 배경이 시각적으로 방해가 될 수 있습니다. 이 문서에서는 근본적인 문제를 살펴보고 자동 완성 배경을 제거하거나 비활성화하는 솔루션을 제공합니다.

노란색 배경은 Chrome이 자동으로 양식 필드를 채우고 있음을 시각적으로 나타냅니다. 이는 자동 완성 제안에 주의를 집중시키고 Chrome이 데이터를 관리하고 있음을 분명히 하도록 설계되었습니다. 이는 일부 사용자에게 도움이 될 수 있지만 다른 사용자는 더 미묘하거나 사용자 정의 가능한 모양을 선호할 수 있습니다.

노란색 자동 완성 배경을 제거하거나 비활성화하려면 사용자 정의 CSS 스타일을 활용하면 됩니다. 다음 코드는 페이지에 추가되거나 사용자 스타일 시트를 통해 포함될 수 있습니다.

input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px white inset !important;
}

설명:

이 CSS 규칙은 자동 완성되는 입력 필드를 대상으로 합니다. 크롬. 특히 WebKit 섀도우 속성을 수정하여 커다란 흰색 삽입 섀도우를 생성합니다. "중요" 플래그는 이 사용자 정의 스타일이 기본 브라우저 스타일을 재정의하도록 보장합니다. 결과적으로 그림자가 전체 입력 필드를 덮기 때문에 자동 채우기 배경이 효과적으로 숨겨집니다.

코드에서 "흰색" 값을 조정하여 배경에 대해 다른 색상을 지정할 수 있습니다. 이를 통해 자신의 디자인 기본 설정에 맞게 자동 완성 필드의 모양을 사용자 정의할 수 있습니다.

위 내용은 Google 크롬 자동완성 기능의 노란색 배경을 제거하거나 사용자 정의하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.