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 대신 어떤 색이든 넣을 수 있습니다 .

조금 해 키지 만 완벽하게 작동합니다.

input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px white inset;
}

대답의 조합이 나를 위해 일했습니다.

<style>
    input:-webkit-autofill,
    input:-webkit-autofill:hover,
    input:-webkit-autofill:focus,
    input:-webkit-autofill:active {
        -webkit-box-shadow: 0 0 0px 1000px #373e4a inset !important;
           -webkit-text-fill-color: white !important;
   }
</style>

다음은 Jason MooTools 버전입니다. Safari에서도 수정합니다.

window.addEvent('domready',function() { 
    $('username').focus();

    if ((navigator.userAgent.toLowerCase().indexOf(\"chrome\") >= 0)||(navigator.userAgent.toLowerCase().indexOf(\"safari\") >= 0))
    {

        var _interval = window.setInterval(function ()
        {
            var autofills = $$('input:-webkit-autofill');
            if (autofills.length > 0)
            {

                window.clearInterval(_interval); // stop polling
                autofills.each(function(el)
                {
                    var clone = el.clone(true,true).inject(el,'after');;
                    el.dispose();
                });
            }
        }, 20);                                               


    }
});

이것은 Safari와 Chrome 모두에서 문제를 해결합니다.

if(navigator.userAgent.toLowerCase().indexOf("chrome") >= 0 || navigator.userAgent.toLowerCase().indexOf("safari") >= 0){
window.setInterval(function(){
    $('input:-webkit-autofill').each(function(){
        var clone = $(this).clone(true, true);
        $(this).after(clone).remove();
    });
}, 20);
}

이것은 CSS 전용 버전이었습니다.

input:-webkit-autofill { -webkit-box-shadow: 0 0 0px 1000px white inset; }

어디 흰색 당신이 원하는 어떤 색깔이 될 수 있습니다.

나는 이것을 사용한다.

input:-webkit-autofill { -webkit-box-shadow: 0 0 0px 1000px white inset !important; }
input:focus:-webkit-autofill { -webkit-box-shadow: 0 0 0px 1000px white inset !important; }
/* You can use color:#color to change the color */

태그에이 작은 코드 줄을 삽입하십시오.

autocomplete="off"

그러나 자동 완성 기능을 계속 사용하려는 경우이 필드에서는이 기능이 비활성화되므로 username / email / idname 필드에이를 배치하지 마십시오. 그러나 암호를 자동 완성하지 않기 때문에이 코드를 암호 입력 태그에 넣으면됩니다. 이 수정은 전자 메일 / 사용자 이름 필드에서 색의 힘, matinain 자동 완성 기능을 제거하고 Jquery 또는 javascript와 같은 부피가 큰 해킹을 피할 수 있도록합니다.

완전히 제거하려면 이전 답변의 코드를 조정하여 호버링, 활성 및 초점에서도 작동하도록하십시오.

input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:active, input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px white inset;
}

Alessandro와 동일한 작업을 수행하는 Mootools 솔루션은 다음과 같습니다. 영향을받는 각 입력을 새로운 입력으로 바꿉니다.

if (Browser.chrome) {
    $$('input:-webkit-autofill').each(function(item) {
        var text = item.value;
        var name = item.get('name');
        var newEl = new Element('input');
        newEl.set('name', name);
        newEl.value = text;
        newEl.replaces(item);
    });
}

그 솔루션은 어떻습니까?

if ($.browser.webkit) {
    $(function() {
        var inputs = $('input:not(.auto-complete-on)');

        inputs.attr('autocomplete', 'off');

        setTimeout(function() {
            inputs.attr('autocomplete', 'on');
        }, 100);
    });
}

자동 완성 및 자동 완성을 끄고 (노란색 배경이 사라짐) 100 밀리 초 기다린 다음 자동 완성없이 자동 완성 기능을 다시 설정합니다.

자동 입력이 필요한 입력이 있으면 auto-complete-onCSS 클래스 를 제공하십시오 .

어떤 해결책도 나를 위해 일하지 않았으며, 사용자 이름과 비밀번호 입력은 여전히 ​​채워지고 노란색 배경이 주어졌습니다.

"자신이 Chrome에서 특정 페이지에서 자동 완성해야하는 내용을 어떻게 결정합니까?"

"입력 ID, 입력 이름을 찾습니까? 양식 ID? 양식 조치?"

사용자 이름과 비밀번호 입력을 실험 한 결과 Chrome에서 자동 완성해야하는 입력란을 찾지 못하는 두 가지 방법 만있었습니다.

1) 비밀번호 입력을 텍스트 입력보다 먼저 설정하십시오. 2) 동일한 이름과 ID를 부여하십시오 ... 또는 이름과 ID가 없습니다.

페이지가로드 된 후, 자바 스크립트를 사용하면 페이지의 입력 순서를 변경하거나 동적으로 이름과 ID를 지정할 수 있습니다 ...

Chrome은 그 결과가 무엇인지 알지 못합니다. 자동 완성은 계속 유지됩니다.

미친 해킹. 그러나 그것은 나를 위해 일하고 있습니다.

크롬 34.0.1847.116, OSX 10.7.5

나를 위해 작동하는 유일한 방법은 다음과 같습니다. (jQuery 필요)

$(document).ready(function(e) {
    if ($.browser.webkit) {
        $('#input_id').val(' ').val('');
    }
});

암호 필드에 대해이 문제를 해결했습니다.

입력 유형을 비밀번호 대신 텍스트로 설정

jQuery로 입력 텍스트 값을 제거하십시오.

jQuery를 사용하여 입력 유형을 비밀번호로 변환

<input type="text" class="remove-autofill">

$('.js-remove-autofill').val('');    
$('.js-remove-autofill').attr('type', 'password');

Arjans 솔루션에 대한 업데이트. 값을 변경하려고하면 허용되지 않습니다. 이것은 나를 위해 잘 작동합니다. 입력에 집중하면 노란색으로 바뀝니다. 충분히 가깝습니다.

$(document).ready(function (){
    if(navigator.userAgent.toLowerCase().indexOf("chrome") >= 0 || navigator.userAgent.toLowerCase().indexOf("safari") >= 0){
        var id = window.setInterval(function(){
            $('input:-webkit-autofill').each(function(){
                var clone = $(this).clone(true, true);
                $(this).after(clone).remove();
            });
        }, 20);

        $('input:-webkit-autofill').focus(function(){window.clearInterval(id);});
    }
});

$('input:-webkit-autofill').focus(function(){window.clearInterval(id);});

이 코드를 사용해보십시오 :

 	$(function(){
   		setTimeout(function(){
   			$('[name=user_password]').attr('type', 'password');
   		}, 1000);
   	});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<input name="user_password" type="password">

요금이 부과되는 namrouti 답변이 정확합니다. 그러나 입력을 선택 하면 배경이 여전히 노란색으로 표시됩니다 . 추가하면 !important문제가 해결됩니다. 당신은 또한 원하는 경우 textarea와 select같은 행동 단지 추가textarea:-webkit-autofill, select:-webkit-autofill

입력 만

input:-webkit-autofill {
    background-color: rgb(250, 255, 189) !important;
}

입력, 선택, 텍스트 영역

input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
    background-color: rgb(250, 255, 189) !important;
}

추가하는 autocomplete="off"것은 자르지 않을 것입니다.

입력 유형 속성을로 변경하십시오 type="search".
Google은 검색 유형의 입력에 자동 완성을 적용하지 않습니다.

시간이 절약되기를 바랍니다.

CSS가 적용될 때까지 노란색 깜박임을 피하려면 나쁜 소년의 전환을 다음과 같이 때립니다.

input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px white inset !important;
    transition: background-color 10s ease-in-out 0s;
}

최종 솔루션 :

$(document).ready(function(){
    var contadorInterval = 0;
    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();
                    setTimeout(function(){
//                        $("#User").val('');
                        $("#Password").val('');
                    },10);
                });
            }
            contadorInterval++;
            if(contadorInterval > 50) window.clearInterval(_interval); // stop polling
        }, 20);
    }else{
        setTimeout(function(){
//            $("#User").val('');
            $("#Password").val('');
        },100);
    }
});

<input type="text" name="foo" autocomplete="off" />

비슷한 질문 : 링크

같은 질문으로 자신을 발견했습니다. 이것은 나를 위해 작동합니다 :

form :focus {
  outline: none;
}