Chrome 자동 완성을 위해 입력 배경색을 제거 하시겠습니까?

내가 작업중 인 양식에서 Chrome은 이메일 및 비밀번호 입력란을 자동으로 채 웁니다. Chrome은 배경색을 옅은 노란색으로 바꿉니다.

내가 작업하고있는 디자인은 어두운 배경에 밝은 텍스트를 사용하고 있기 때문에 양식의 모양을 엉망으로 만듭니다. 노란색 상자와 거의 보이지 않는 흰색 텍스트가 있습니다. 필드에 초점이 맞춰지면 필드가 정상으로 돌아갑니다.

Chrome에서이 입력란의 색상 변경을 중지 할 수 있습니까?

이것은 잘 작동합니다. 입력 상자 내부의 텍스트 스타일뿐만 아니라 입력 상자 스타일을 변경할 수 있습니다.

여기에서 white,, #DDD등의 색상을 사용할 수 있습니다 rgba(102, 163, 177, 0.45).

그러나 transparent여기서는 작동하지 않습니다.

/* Change the white to any color ;) */
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active  {
    -webkit-box-shadow: 0 0 0 30px white inset !important;
}

또한 이것을 사용하여 텍스트 색상을 변경할 수 있습니다.

/*Change text in autofill textbox*/
input:-webkit-autofill {
    -webkit-text-fill-color: yellow !important;
}

조언 : 수백 또는 수천에 과도한 흐림 반경을 사용하지 마십시오. 이것은 이점이 없으며 약한 모바일 장치에 프로세서 부하를 줄 수 있습니다. 실제 외부 그림자에도 적용됩니다. 20px 높이의 일반 입력 상자의 경우 30px 'blur radius'가 완벽하게 덮습니다.

상자 그림자를 추가하는 이전의 솔루션은 단색 배경이 필요한 사람들에게 적합합니다. 전환을 추가하는 다른 솔루션은 효과가 있지만 지속 시간 / 지연을 설정해야한다는 것은 어느 시점에서 다시 표시 될 수 있음을 의미합니다.

내 솔루션은 키 프레임을 대신 사용하여 선택한 색상을 항상 표시하는 것입니다.

@-webkit-keyframes autofill {
    0%,100% {
        color: #666;
        background: transparent;
    }
}

input:-webkit-autofill {
    -webkit-animation-delay: 1s; /* Safari support - any positive time runs instantly */
    -webkit-animation-name: autofill;
    -webkit-animation-fill-mode: both;
}

코드 펜 예 : https://codepen.io/-Steve-/pen/dwgxPB

더 나은 해결책이 있습니다.

투명한 입력 필드가 필요했기 때문에 배경을 아래와 같이 다른 색으로 설정해도 문제가 해결되지 않았습니다.

-webkit-box-shadow: 0 0 0px 1000px white inset;

그래서 나는 다른 것들을 시도했고 이것을 생각해 냈습니다.

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    transition: background-color 5000s ease-in-out 0s;
}

이것은 내 솔루션이므로 전환 및 전환 지연을 사용 했으므로 입력 필드에 투명한 배경을 가질 수 있습니다.

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-transition: "color 9999s ease-out, background-color 9999s ease-out";
    -webkit-transition-delay: 9999s;
}

이 채색 동작은 WebKit에서 시작된 이후로 설계된 것입니다. 사용자는 미리 채워진 데이터를 이해할 수 있습니다. 버그 1334

다음을 수행하거나 특정 양식 컨트롤을 사용하여 자동 완성을 끌 수 있습니다.

<form autocomplete="off">
...
</form

또는 다음을 수행하여 자동 완성 색상을 변경할 수 있습니다.

input:-webkit-autofill {
    color: #2a2a2a !important;
}

http://code.google.com/p/chromium/issues/detail?id=46543에서 다시 작동하기 위해 버그가 추적되고 있습니다 .

이것은 WebKit 동작입니다.

현재 가능한 해결책은 내부에 "강한"그림자를 설정하는 것입니다.

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;
}  

자동 완성 스타일 숨기기를 시도하십시오.

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:active,
input:-webkit-autofill:focus {
    background-color: #FFFFFF !important;
    color: #555 !important;
    -webkit-box-shadow: 0 0 0 1000px white inset !important;
    -webkit-text-fill-color: #555555 !important;
    }

위의 모든 답변은 효과가 있었지만 결함이있었습니다. 아래 코드는 깜박이지 않고 완벽하게 작동하는 위의 두 가지 답변을 결합한 것입니다.

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    transition: background-color 5000s ease-in-out 0s;
    -webkit-box-shadow: 0 0 0px 1000px #fff inset;
}

SASS

input:-webkit-autofill

  &,
  &:hover,
  &:focus,
  &:active
    transition-delay: 9999s
    transition-property: background-color, color

2 시간 동안 검색 한 후에도 Google은 여전히 ​​노란색을 무시하지만 수정을 위해 i를 사용합니다. 맞습니다. 호버, 포커스 등에서도 작동합니다. 당신이해야 할 일은 그것에 중요 함을 추가하는 것입니다.

 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;
  }

입력 필드에서 노란색이 완전히 제거됩니다.

1 시간 지연을 추가하면 입력 요소에서 CSS 변경 사항이 일시 중지됩니다.
전환 애니메이션이나 내부 그림자를 추가하는 것보다 낫습니다.

input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill{
  transition-delay: 3600s;
}

이 외에도:

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

추가하고 싶을 수도 있습니다

input:-webkit-autofill:focus{
-webkit-box-shadow: 0 0 0px 1000px white inset, 0 0 8px rgba(82, 168, 236, 0.6);
}

그렇지 않으면 입력을 클릭하면 노란색이 다시 나타납니다. 초점을 맞추기 위해 부트 스트랩을 사용하는 경우 두 번째 부분은 0 8px rgba (82, 168, 236, 0.6);

부트 스트랩 입력처럼 보일 것입니다.

입력 필드가 투명해야하기 때문에 상자 그림자를 사용할 수없는 문제가있었습니다. 그것은 약간의 해킹이지만 순수한 CSS입니다. 전환을 매우 긴 시간으로 설정하십시오.

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
transition: background-color 50000s ease-in-out 0s, color 5000s ease-in-out 0s;
}

이것을보십시오 : 위의 @ Nathan-white 답변과 약간의 조정이 있습니다.

/* For removing autocomplete highlight color in chrome (note: use this at bottom of your css file). */

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    transition: all 5000s ease-in-out 0s;
    transition-property: background-color, color;
}

자동 완성 기능을 그대로 유지하려면 약간의 jQuery를 사용하여 Chrome 스타일을 제거하십시오. 나는 여기에 대한 짧은 게시물을 썼습니다 : http://www.benjaminmiles.com/2010/11/22/fixing-google-chromes-yellow-autocomplete-styles-with-jquery/

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);
    });
});}

JQuery없이 JavaScript를 사용하여 다른 솔루션을 개발했습니다. 이 정보가 유용하거나 솔루션을 다시 게시하기로 결정한 경우 내 이름 만 포함하면됩니다. 즐겨. – 다니엘 페어 웨더

var documentForms = document.forms;

for(i = 0; i < documentForms.length; i++){
    for(j = 0; j < documentForms[i].elements.length; j++){
        var input = documentForms[i].elements[j];

        if(input.type == "text" || input.type == "password" || input.type == null){
            var text = input.value;
            input.focus();
            var event = document.createEvent('TextEvent');
            event.initTextEvent('textInput', true, true, window, 'a');
            input.dispatchEvent(event);
            input.value = text;
            input.blur();
        }
    }
}

이 코드는 추가 텍스트를 입력하자마자 Chrome이 웹킷 스타일을 제거한다는 사실을 기반으로합니다. 입력 필드 값을 변경하는 것만으로는 충분하지 않습니다. Chrome은 이벤트를 원합니다. 각 입력 필드 (텍스트, 비밀번호)에 중점을 두어 키보드 이벤트 (문자 'a')를 보낸 다음 텍스트 값을 이전 상태 (자동으로 채워진 텍스트)로 설정할 수 있습니다. 이 코드는 모든 브라우저에서 실행되며 웹 페이지 내의 모든 입력 필드를 확인하고 필요에 따라 조정합니다.

CSS 필터를 사용하는 순수한 CSS 솔루션이 있습니다.

filter: grayscale(100%) brightness(110%);

회색조 필터는 노란색을 회색으로 바꾸고 밝기는 회색을 제거합니다.

코덱 참조

이것은 입력, 텍스트 영역에서 작동하며 일반, 호버, 포커스 및 활성 상태에서 선택됩니다.

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

다음은 SASS / SCSS를 사용하는 사람들을위한 위 솔루션의 SCSS 버전입니다.

input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill
{
    &, &:hover, &:focus, &:active
    {
        -webkit-box-shadow: 0 0 0px 1000px white inset !important;
    }
}

나침반을 사용하는 사람들 :

@each $prefix in -webkit, -moz {
    @include with-prefix($prefix) {
        @each $element in input, textarea, select {
            #{$element}:#{$prefix}-autofill {
                @include single-box-shadow(0, 0, 0, 1000px, $white, inset);
            }
        }
    }
}

나는 포기한다!

자동 완성 기능을 사용하여 입력 색상을 변경할 수있는 방법이 없으므로 웹킷 브라우저의 jQuery를 사용하여 입력 색상을 모두 비활성화하기로 결정했습니다. 이처럼 :

if (/webkit/.test(navigator.userAgent.toLowerCase())) {
    $('[autocomplete="on"]').each(function() {
        $(this).attr('autocomplete', 'off');
    });
}

Google 크롬에서 자동 완성을 피하고 조금 "만도"를 막으려면 해결책이 있습니다 .Google 크롬이 해당 입력 필드에 추가하는 클래스를 제거하고 표시 할 필요가 없으면 값을 ""로 설정하십시오. 로드 후 데이터를 저장하십시오.

$(document).ready(function () {
    setTimeout(function () {
            var data = $("input:-webkit-autofill");
            data.each(function (i,obj) {
            $(obj).removeClass("input:-webkit-autofill");
                    obj.value = "";
            });
    },1);           
});

Daniel Fairweather의 솔루션 ( Chrome 자동 완성을 위해 입력 배경색 제거? ) (나는 그의 솔루션을 찬성하고 싶지만 여전히 15 담당자가 필요합니다) 정말 효과적입니다. 가장 많이 옹호 된 솔루션에는 큰 차이가 있습니다. 배경 이미지를 유지할 수 있습니다! 그러나 약간의 수정 (Chrome 확인 만)

그리고 당신은 명심해야합니다, 그것은 가시 필드에서만 작동합니다. !

따라서 양식에 $ .show ()를 사용하는 경우 show () 이벤트 후이 코드를 실행해야합니다.

내 전체 솔루션 (로그인 양식에 대한 표시 / 숨기기 버튼이 있음) :

 if (!self.isLoginVisible()) {
        var container = $("#loginpage");
        container.stop();
        self.isLoginVisible(true);
        if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0) {

            var documentForms = document.forms;
            for (i = 0; i < documentForms.length; i++) {
                for (j = 0; j < documentForms[i].elements.length; j++) {
                    var input = documentForms[i].elements[j];

                    if (input.type == "text" || input.type == "password" || input.type == null) {
                        var text = input.value;
                        input.focus();
                        var event = document.createEvent('TextEvent');
                        event.initTextEvent('textInput', true, true, window, 'a');
                        input.dispatchEvent(event);
                        input.value = text;
                        input.blur();
                    }
                }
            }
        }

    } else {
        self.hideLogon();
    }

다시 한 번 죄송합니다. 댓글로 선호합니다.

원한다면 내가 사용한 사이트에 대한 링크를 넣을 수 있습니다.

그리고 이것은 나를 위해 일했습니다 (Chrome 76 테스트)

input:-internal-autofill-selected {
    background-color: transparent;
}

위의 솔루션을 거의 모두 시도했습니다. 아무것도 나를 위해 작동하지 않습니다. 마침내이 솔루션으로 작업했습니다. 누군가가 이것을 돕기를 바랍니다.

/* Change Autocomplete styles in Chrome*/
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  border: 1px solid green;
  -webkit-text-fill-color: green;
  -webkit-box-shadow: 0 0 0px 1000px #000 inset;
  transition: background-color 5000s ease-in-out 0s;
}

벤자민 감사합니다!

Mootools 솔루션은을 사용하여 필드를 얻을 수 없으므로 조금 까다 롭습니다 $('input:-webkit-autofill'). 따라서 내가 사용한 것은 다음과 같습니다.

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

  window.addEvent('load', function() {
    setTimeout(clearWebkitBg, 20);
    var elems = getElems();
    for (var i = 0; i < elems.length; i++) {
      $(elems[i]).addEvent('blur', clearWebkitBg);
    }
  });
}
function clearWebkitBg () {
  var elems = getElems();
  for (var i = 0; i < elems.length; i++) {
    var oldInput = $(elems[i]);
    var newInput = new Element('input', {
      'name': oldInput.get('name'),
      'id': oldInput.get('id'),
      'type': oldInput.get('type'),
      'class': oldInput.get('class'),
      'value': oldInput.get('value')
    });
    var container = oldInput.getParent();
    oldInput.destroy();
    container.adopt(newInput);
  }
}
function getElems() {
  return ['pass', 'login']; // ids
}

입력이 페이지 배경 위에 겹쳐진 반투명 배경을 가지고 있기 때문에 어떤 해결책도 나를 위해 효과가 없었습니다. 삽입 그림자가 작동하지 않습니다.

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

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

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

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

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

그리고 Chrome은 무엇을 공격했는지 알지 못합니다 ... 자동 완성이 손상되었습니다!

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

크롬 34.0.1847.116, OSX 10.7.5

불행히도 2016 년에 위의 솔루션 중 어느 것도 나를 위해 일한 적이 없습니다 (질문 후 몇 년)

여기 내가 사용하는 공격적인 솔루션이 있습니다.

function remake(e){
    var val = e.value;
    var id = e.id;
    e.outerHTML = e.outerHTML;
    document.getElementById(id).value = val;
    return true;
}

<input id=MustHaveAnId type=text name=email autocomplete=on onblur="remake(this)">

기본적으로 값을 저장하는 동안 태그를 삭제하고 다시 만든 다음 값을 되돌립니다.

나는 이것을 사용한다. 나를 위해 일하십시오. 필드의 노란색 배경을 제거하십시오.

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
input:-webkit-autofill:valid,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus
{
    -webkit-transition-delay: 99999s;
    -webkit-text-fill-color:#D7D8CE;
}

앞에서 언급했듯이, inset -webkit-box-shadow가 가장 효과적입니다.

/* Code witch overwrites input background-color */
input:-webkit-autofill {
     -webkit-box-shadow: 0 0 0px 1000px #fbfbfb inset;
}

또한 텍스트 색상을 변경하는 코드 스 니펫 :

input:-webkit-autofill:first-line {
     color: #797979;
}

이것은 나를 위해 일했다 :

padding: 5px;
background-clip: content-box;