사용에 자동 완성 기능 자동 채우기 CHROM 브라우저 양식 양식 입력 상자가 전체적인 모양과 페이지의 느낌, 그리고 그들과 함께 문제가 거래의 많은에 큰 영향을 미쳤다 기본 멋진 노란색 배경이 될 것이다 입력합니다.
분석 :
CHROM가 자동으로 입력에 대해 다음과 스타일을 추가하기 때문에 이런 일이 발생하는 이유는 다음과 같습니다
input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
background-color: rgb(250, 255, 189);
background-image: none;
color: rgb(0, 0, 0);
}그리고이 패턴은 적용되지 않을 수 있습니다, 플러스 우리는 다른 방법을 생각해야하므로 중요한이 작동하지 않습니다.
솔루션
1. 상자 그림자 커버
input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
-webkit-box-shadow: 0 0 0 1000px white inset; // 背景设为白色
-webkit-text-fill-color: #fff; // 字体颜色
}
input[type=text]:focus, input[type=password]:focus, textarea:focus {
-webkit-box-shadow: 0 0 0 1000px white inset; // 获得焦点时背景设为白色
-webkit-text-fill-color: #fff; // 字体颜色
}이 흰색의 배경을 넣어.
그러나이 방법의 단점은 단지 배경이 단색으로하지 투명으로 변경한다는 것입니다. 참조 방법 2의 경우는 투명한 배경이 필요합니다.
2. 애니메이션 애니메이션을 사용하여
input:-webkit-autofill {
-webkit-animation: autofill-fix 1s infinite;
-webkit-text-fill-color: #fff;
}
@-webkit-keyframes autofill-fix {
from {
background-color: transparent
}
to {
background-color: transparent
}
}이 말은 않는 투명 순환 애니메이션 항상 투명 색상.
위의 두 가지 방법은 기본적으로 문제의 대부분을 해결할 수 있습니다.
자동 완성 기능을 해제합니다
<form autocomplete="off"></form>
<!-- OR -->
<input autocomplete="off">
