HTML 및 CSS로 브라우저 자동 완성 및 입력 강조 표시를 어떻게 재정의할 수 있습니까?

HTML/CSS를 사용하여 양식 자동 채우기 및 입력 강조 표시 재정의

웹 개발에서 브라우저에서 생성된 자동 채우기 제안 및 입력 강조 표시를 제거하는 것은 특히 처리할 때 문제가 될 수 있습니다. 같은 페이지에 여러 양식이 있습니다. 이 문서에서는 자동 채우기를 무시하고 노란색 배경 강조 표시를 제거하는 솔루션을 제공하여 두 가지 문제를 다룹니다.

자동 채우기:

브라우저는 이전에 입력한 정보를 자동으로 제안합니다. 입력 필드. 일부 사용자에게는 편리하지만 동일한 페이지의 여러 양식이 자동 완성되지 않으면 문제가 될 수 있습니다. 특정 입력에 대해 자동 채우기를 비활성화하려면 자동 완성 속성을 사용하세요.

<form>
  <input type="text" name="username" autocomplete="off">
  <input type="password" name="password" autocomplete="off">
  <input type="submit" value="Submit">
</form>

입력 강조 표시:

기본적으로 브라우저는 입력 필드가 입력될 때 노란색 배경을 적용합니다. 집중되어 있습니다. 이 동작은 CSS를 사용하여 재정의할 수 있습니다. :focus 가상 클래스는 현재 포커스가 있는 모든 요소를 ​​대상으로 합니다. CSS를 사용하여 노란색 강조 표시를 제거하는 방법은 다음과 같습니다.

input:focus {
  background-color: transparent;
}

그러나 이 솔루션은 최신 버전의 Chrome에서는 더 이상 작동하지 않습니다. 대신 다음 방법을 사용하세요.

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

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

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