[html] Chrome 양식 자동 완성 및 노란색 배경
Chrome 및 양식 자동 완성 기능에 디자인 문제가 있습니다. Chrome에서 일부 로그인 / 비밀번호를 기억하면 배경색이 노란색으로 바뀝니다.
스크린 샷은 다음과 같습니다.
그 배경을 제거 하거나이 자동 채우기를 비활성화하는 방법은 무엇입니까?
답변
“흰색”을 원하는 색상으로 변경하십시오.
input:-webkit-autofill {
-webkit-box-shadow: 0 0 0 1000px white inset !important;
}
답변
투명한 입력 필드를 원한다면 전환 및 전환 지연을 사용할 수 있습니다.
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
-webkit-transition-delay: 9999s;
-webkit-transition: color 9999s ease-out, background-color 9999s ease-out;
}
답변
여기에 해결책 :
if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0) {
$(window).load(function(){
$('input:-webkit-autofill').each(function(){
var text = $(this).val();
var name = $(this).attr('name');
$(this).after(this.outerHTML).remove();
$('input[name=' + name + ']').val(text);
});
});
}
답변
Firefox에서는 autocomplete = “off / on”속성을 사용하여 양식에서 모든 자동 완성을 비활성화 할 수 있습니다. 마찬가지로 개별 속성 자동 완성은 동일한 속성을 사용하여 설정할 수 있습니다.
<form autocomplete="off" method=".." action="..">
<input type="text" name="textboxname" autocomplete="off">
Chrome에서 제대로 작동하는지 테스트 할 수 있습니다.
답변
입력 요소에 첨부 된 데이터, 첨부 된 핸들러 및 기능뿐만 아니라 자동 완성을 유지하려면 다음 스크립트를 시도하십시오.
if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0)
{
var _interval = window.setInterval(function ()
{
var autofills = $('input:-webkit-autofill');
if (autofills.length > 0)
{
window.clearInterval(_interval); // stop polling
autofills.each(function()
{
var clone = $(this).clone(true, true);
$(this).after(clone).remove();
});
}
}, 20);
}
자동 완성 요소를 찾을 때까지 폴링하고 데이터 및 이벤트를 포함하여 요소를 복제 한 다음 동일한 위치의 DOM에 삽입하고 원본을 제거합니다. 페이지 채우기 후 자동 채우기가 1 초 정도 걸리므로 복제 할 항목이 있으면 폴링을 중지합니다. 이것은 이전 코드 샘플의 변형이지만 더 강력하고 가능한 많은 기능을 그대로 유지합니다.
(Chrome, Firefox 및 IE 8에서 작동하는지 확인했습니다.)
답변
다음 CSS는 노란색 배경색을 제거하고 선택한 배경색으로 바꿉니다. 자동 채우기를 비활성화하지 않으며 jQuery 또는 Javascript 해킹이 필요하지 않습니다.
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: /*your box-shadow*/,0 0 0 50px white inset;
-webkit-text-fill-color: #333;
}솔루션 복사에서 :
HTML / CSS로 강조 재정의 브라우저 양식 작성 및 입력
답변
나를 위해 일한 CSS 변경 만 필요합니다.
input:-webkit-autofill {
-webkit-box-shadow: 0 0 0px 1000px #ffffff inset!important;
}#ffffff 대신 어떤 색이든 넣을 수 있습니다 .
