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

Program / 글쓴이

내가 작업중 인 양식에서 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;
    }