같은 페이지에 로그인과 가입이라는 두 가지 기본 양식이 있습니다. 이제 자동 완성 양식의 로그인에 문제가 없습니다.하지만 가입 양식 자동 완성도 마음에 들지 않습니다.
또한 양식 스타일에는 무시할 수없는 노란색 배경이 있으며 인라인 CSS를 사용하여 원하지 않습니다. 노랑색을 멈추게하려면 어떻게해야합니까그리고 (아마도) 자동 충전? 미리 감사드립니다!
답변
자동 완성을 위해 다음을 사용할 수 있습니다.
<form autocomplete="off">착색 문제와 관련하여 :
스크린 샷에서 웹 키트가 다음 스타일을 생성한다는 것을 알 수 있습니다.
input:-webkit-autofill {
background-color: #FAFFBD !important;
}1) #id 스타일이 .class 스타일보다 훨씬 중요하므로 다음과 같이 작동 할 수 있습니다.
#inputId:-webkit-autofill {
background-color: white !important;
}2) 그래도 작동하지 않으면 프로그래밍 방식으로 자바 스크립트를 통해 스타일을 설정하려고 할 수 있습니다
$("input[type='text']").bind('focus', function() {
$(this).css('background-color', 'white');
});3) 그래도 문제가 해결되지 않으면 🙂 다음 사항을 고려하십시오. 노란색을 숨기지 않지만 텍스트를 다시 읽을 수있게 만듭니다.
input:-webkit-autofill {
color: #2a2a2a !important;
}4) CSS / 자바 스크립트 솔루션 :
CSS :
input:focus {
background-position: 0 0;
}그리고 다음 자바 스크립트가 onload에서 실행되어야합니다.
function loadPage()
{
if (document.login)//if the form login exists, focus:
{
document.login.name.focus();//the username input
document.login.pass.focus();//the password input
document.login.login.focus();//the login button (submitbutton)
}
}예 :
<body onload="loadPage();">행운을 빕니다 🙂
5) 위의 작업 중 입력 요소를 제거하고 복제 한 다음 복제 된 요소를 다시 페이지에 배치하면 Safari 6.0.3에서 작동합니다.
<script>
function loadPage(){
var e = document.getElementById('id_email');
var ep = e.parentNode;
ep.removeChild(e);
var e2 = e.cloneNode();
ep.appendChild(e2);
var p = document.getElementById('id_password');
var pp = p.parentNode;
pp.removeChild(p);
var p2 = p.cloneNode();
pp.appendChild(p2);
}
document.body.onload = loadPage;
</script>6) 여기에서 :
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);
});
});
}답변
그림자 안에 “강한”것으로 속임수를 쓰십시오.
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;
} 답변
이 CSS 규칙을 추가하면 노란색 배경색이 사라집니다. 🙂
input:-webkit-autofill {
-webkit-box-shadow: 0 0 0px 1000px white inset;
}답변
<form autocomplete="off">거의 모든 최신 브라우저가이를 존중합니다.
답변
검색 2 시간 후에도 어떻게 든 Chrome이 여전히 노란색을 재정의하는 것처럼 보이지만 해결 방법을 찾았습니다. 호버, 포커스 등에서도 작동합니다. 추가 !important하기 만하면됩니다.
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
-webkit-box-shadow: 0 0 0px 1000px white inset !important;
}입력 필드에서 노란색을 완전히 제거합니다.
답변
브라우저가이를 추적하지 않도록 양식 요소의 이름 속성을 생성 된 것으로 변경할 수도 있습니다. 그러나 요청 URL이 동일하면 firefox 2.x +와 Google 크롬에 많은 문제가없는 것 같습니다. 기본적으로 가입 양식에 솔트 요청 매개 변수와 솔트 필드 이름을 추가하십시오.
그러나 autocomplete = “off”가 여전히 최고의 솔루션이라고 생각합니다 🙂
답변
을 통해 HTML5에서 자동 완성 기능을 비활성화 할 수 autocomplete="off"있지만 브라우저의 강조 표시를 재정의 할 수는 없습니다. ::selectionCSS에서 혼란을 겪을 수 있습니다 (대부분의 브라우저에는 작동하기 위해 공급 업체 접두사가 필요하지만).
브라우저 공급 업체가 특정 공급 업체별 재정의 방법을 구체적으로 구현하지 않은 경우 이미 사용자의 사이트 스타일 시트를 재정의하려는 스타일에 대해서는 아무것도 수행 할 수 없습니다. 이들은 일반적으로 스타일 시트가 적용된 후에 적용되며 ! important재정의를 무시 합니다.