> 웹 프론트엔드 > CSS 튜토리얼 > Chrome의 노란색 배경 자동완성을 어떻게 제거하거나 비활성화할 수 있나요?

Chrome의 노란색 배경 자동완성을 어떻게 제거하거나 비활성화할 수 있나요?

Mary-Kate Olsen
풀어 주다: 2024-12-15 10:15:10
원래의
162명이 탐색했습니다.

How Can I Remove or Disable Chrome's Autofill Yellow Background?

Google Chrome 양식 자동 완성의 노란색 배경: 디자인 딜레마

온라인 양식 완성을 간소화하기 위해 설계된 Google Chrome의 양식 자동 완성 기능은 미적 감각을 도입합니다. 당황. Chrome은 로그인 자격 증명을 저장할 때 눈에 띄는 노란색 배경으로 관련 입력 필드를 강조 표시합니다. 일부 사용자는 이 색 구성표가 편리하기는 하지만 시각적으로 매력적이지 않다고 생각합니다.

이 문제는 개발자들 사이에서 다음과 같은 질문을 촉발시켰습니다. Chrome의 자동 완성 기능과 관련된 노란색 배경을 어떻게 제거하거나 비활성화할 수 있습니까?

답변 웹 페이지 요소를 사용자 정의할 수 있는 CSS(Cascading Style Sheets)에 있습니다. 특정 CSS 규칙을 적용하여 사용자는 자동 완성 입력 필드의 배경색을 수정할 수 있습니다.

사용자 정의 CSS 코드는 다음과 같습니다.

input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px white inset !important;
}
로그인 후 복사

이 코드는 입력에 상자 그림자 효과를 추가합니다. 명시적인 흰색이 있는 필드입니다. "삽입" 매개변수를 사용하면 입력 필드의 경계 내에 색상이 적용되어 입력 필드의 크기를 수정하지 않고도 노란색 배경을 효과적으로 마스킹할 수 있습니다.

이 CSS 규칙을 웹 페이지에 통합하여 개발자는 사용자 정의된 Chrome의 자동 완성 기능과 관련된 노란색 배경을 제거하여 웹사이트에 시각적으로 더욱 일관된 미적 감각을 제공함으로써 사용자 경험을 향상시켰습니다.

위 내용은 Chrome의 노란색 배경 자동완성을 어떻게 제거하거나 비활성화할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿