>웹 프론트엔드 >CSS 튜토리얼 >HTML 및 CSS를 사용하여 브라우저 양식 자동 채우기 및 입력 강조 표시를 어떻게 재정의할 수 있습니까?

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

DDD
DDD원래의
2024-12-13 18:41:15279검색

How Can I Override Browser Form Auto-Filling and Input Highlighting Using HTML and CSS?

브라우저 양식 자동 채우기 및 입력 강조 무시

한 페이지에서 여러 양식으로 작업할 때 자동으로 문제가 발생하는 것이 일반적입니다. - 채우기 및 원치 않는 강조 표시. 이 문서에서는 HTML/CSS를 활용하여 자동 채우기를 비활성화하고 노란색 강조 표시를 재정의하는 데 중점을 두고 이러한 문제를 다룹니다.

자동 채우기 비활성화

최신 Chrome 버전에서는 그림자 내부에 강력한 요소를 사용하는 것이 오래되었습니다. 다른 접근 방식은 다음과 같이 자동 채우기를 억제하는 것입니다.

<input autocomplete="off" ...>

강조 색상 재정의

원치 않는 노란색 강조 표시를 재정의하려면 다음 CSS 규칙을 적용하세요.

input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 50px your_background_color inset;
    -webkit-text-fill-color: your_font_color;
}

"your_ground_color"를 원하는 배경색으로 바꾸고 "your_font_color"를 원하는 글꼴로 바꾸세요. color.

참고: 이 솔루션은 모든 브라우저에서 완전히 효과적이지 않을 수 있습니다. Firefox와 같은 일부 브라우저에서는 여전히 희미한 노란색 강조 표시가 나타날 수 있습니다.

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

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