Chrome browser_javascript 기술에서 양식이 자동으로 채워질 때 브라우저에서 자동으로 추가한 기본 스타일을 제거하는 방법

1. 해당 문제의 원인은 계정 로그인 페이지 작성시 입력폼에 배경 이미지가 추가되어 자동으로 입력되었을 때 연한 노란색 배경이 나타났기 때문입니다.

이유는 입력요소에 성급하게 직접 설정을 하다가 문제가 생겼기 때문입니다. 따라서 이 아이콘을 입력 폼 외부에 배치하면 이러한 문제가 발생하지 않습니다.

2. 양식 자동 완성에 추가되는 브라우저 기본 스타일을 처리하고 피하는 방법

두 번째 그림은 양식이 자동으로 채워진 후 Chrome이 기본적으로 자동으로 채워진 입력 양식에 input:-webkit-autofill 개인 속성을 추가한다는 것입니다

input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
 background-color: rgb(250, 255, 189); /* #FAFFBD; */
 background-image: none;
 color: rgb(0, 0, 0);
}

여기에 이 ​​코드가 추가된 것을 보면 스타일 재정의를 사용하여 해결해야겠다는 생각이 듭니다. !important를 사용하여 우선순위를 높일 수 있습니다. 하지만 문제가 있습니다. 추가하세요! important는 원래 배경 및 글꼴 색상을 덮어쓸 수 없습니다. 배경색, 배경 이미지 색상에 대한 크롬의 기본 정의를 제외하고 색상은 사용할 수 없습니다.

!important는 우선순위를 높이는 데 사용할 수 있습니다.

input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
 background-color: #FFFFFF;
 background-image: none;
 color: #333;
 /* -webkit-text-fill-color: red; //这个私有属性是有效的 */
}
input:-webkit-autofill:hover {
 /* style code */
}
input:-webkit-autofill:focus {
 /* style code */
}

두 가지 아이디어가 있습니다. 1. 패치를 통해 버그를 수정합니다. 2. 브라우저에 내장된 양식 작성 기능을 끄세요

시나리오 1: 입력 텍스트 상자의 배경이 단색입니다

해결책:

input:-webkit-autofill {
 -webkit-box-shadow: 0 0 0px 1000px white inset;
 -webkit-text-fill-color: #333;
}

시나리오 2: 입력 텍스트 상자에 그림 배경이 사용됨

해결책:

if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0)
{
 var _interval = window.setInterval(function () {
 var autofills = $('input:-webkit-autofill');
 if (autofills.length > 0) {
  window.clearInterval(_interval); // 停止轮询
  autofills.each(function() {
  var clone = $(this).clone(true, true);
  $(this).after(clone).remove();
  });
 }
 }, 20);
}

먼저 크롬인지 확인하고 그렇다면 input:-webkit-autofill 요소를 순회한 후 값 가져오기, 추가, 제거 등의 작업을 통해 구현합니다. 이 방법은 작동하지 않습니다! !

그래서 결국 아이콘을 입력 양식의 배경 이미지로 사용하지 않고 대신 추가 라벨을 작성하고 아이콘을 양식 외부로 가져갔습니다.

아이디어 2: 브라우저에 내장된 양식 작성 기능을 끄세요

자동 완성 양식을 끄고 비밀번호를 직접 기억하려면 양식 속성 autocomplete="off/on"을 설정하세요.

사진과 같이: 자동 채우기 전, 이 메일함의 작은 아이콘이 입력 양식의 배경 이미지입니다

그림과 같이: 작성 후 작은 편지함 아이콘이 브라우저의 기본 스타일로 덮어쓰여집니다

드디어

Chrome 브라우저에서 양식이 자동으로 채워질 때 기본 스타일을 추가하고 싶지 않다면 이 작은 아이콘을 양식 외부에 두세요. 이는 입력 상자이기 때문입니다.

국경-하단만. 입력 상자에 테두리가 있는 경우 div 테두리를 사용하여 입력 상자의 테두리인 것처럼 가장한 다음 입력 상자에 테두리가 없도록 만들어야 할 수 있습니다.

이런 입력창

위의 방법을 통해 친구들이 브라우저에 기본 스타일을 자동으로 추가하는 문제를 성공적으로 해결했습니다. 친구들은 이 글을 안심하고 참조할 수 있습니다.