CSS를 사용하여 기본 브라우저 양식 자동 완성 및 강조 표시를 어떻게 재정의할 수 있습니까?

CSS로 기본 브라우저 양식 동작 재정의

웹 브라우저는 종종 양식 필드를 자동으로 채우고 입력 필드를 노란색 배경으로 강조 표시합니다. 일부 사용자에게는 편리하지만 특정 시나리오에서는 바람직하지 않을 수 있습니다. HTML 및 CSS에서 이러한 기본 동작을 재정의하는 방법을 살펴보겠습니다.

양식 자동 채우기 비활성화

양식 자동 채우기를 방지하려면 양식 태그. 예:

<form autocomplete="off">
  ...
</form>

그러나 이 속성은 모든 브라우저에서 완전히 지원되지 않을 수 있습니다.

입력 강조 표시 제거

기본값을 재정의하려면 입력 필드를 노란색 배경으로 강조 표시하려면 다음 CSS 규칙을 사용하세요.

input:-webkit-autofill {
  background-color: #fff !important; /* Change to desired color */
}

이 코드는 브라우저에 의해 자동으로 채워지는 입력 필드의 배경색입니다. !important를 사용하면 이 규칙이 다른 스타일보다 우선하도록 할 수 있습니다.

추가 팁

위 CSS 규칙이 최신 버전에서 작동하지 않는 경우 Chrome에서는 다음 트릭을 사용해 보세요.

input:-webkit-autofill {
  box-shadow: 0 0 0 50px white inset; /* Change color to background */
  -webkit-text-fill-color: #333;
}

이렇게 하면 입력 필드 주위에 "강한" 그림자가 생성되어 입력 필드를 효과적으로 숨깁니다. 노란색 배경.

위 내용은 CSS를 사용하여 기본 브라우저 양식 자동 완성 및 강조 표시를 어떻게 재정의할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!