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 '흐림 반경'이 완벽하게 덮습니다.
상자 그림자를 추가하는 이전 솔루션은 단색 배경이 필요한 사람들에게 적합합니다. 전환을 추가하는 다른 솔루션이 작동하지만 지속 시간 / 지연을 설정해야하는 것은 어느 시점에서 다시 표시 될 수 있음을 의미합니다.
내 해결책은 대신 키 프레임을 사용하는 것입니다. 그러면 항상 선택한 색상이 표시됩니다.
@-webkit-keyframes autofill {
to {
color: #666;
background: transparent;
}
}
input:-webkit-autofill {
-webkit-animation-name: autofill;
-webkit-animation-fill-mode: both;
}
Codepen 예제 : 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은 여전히 어떻게 든 노란색을 무시하는 것 같지만 나는 그것을 수정했습니다. 맞습니다. 호버, 초점 등에서도 작동합니다. 당신이해야 할 일은 그것에! 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;
}
이것은 입력 필드에서 노란색을 완전히 제거합니다.
이 외에도:
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 0 8px rgba (82, 168, 236, 0.6);
부트 스트랩 입력처럼 보이도록합니다.
자동 완성 기능을 그대로 유지하려면 약간의 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);
});
});}
입력 필드가 투명해야하므로 box-shadow를 사용할 수없는 문제가있었습니다. 약간의 해킹이지만 순수한 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없이 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();
}
}
}
이 코드는 추가 텍스트를 입력하자마자 Google 크롬이 Webkit 스타일을 제거한다는 사실을 기반으로합니다. 입력 필드 값을 변경하는 것만으로는 충분하지 않으며 Chrome은 이벤트를 원합니다. 각 입력 필드 (텍스트, 비밀번호)에 초점을 맞춰 키보드 이벤트 (문자 'a')를 보낸 다음 텍스트 값을 이전 상태 (자동 채워진 텍스트)로 설정할 수 있습니다. 이 코드는 모든 브라우저에서 실행되며 웹 페이지 내의 모든 입력 필드를 확인하고 필요에 따라 조정합니다.
1 시간 지연을 추가하면 입력 요소의 CSS 변경이 일시 중지됩니다.
전환 애니메이션이나 내부 그림자를 추가하는 것보다 더 좋습니다.
input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill{
transition-delay: 3600s;
}
Compass를 사용하는 사용자 :
@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);
}
}
}
}
CSS 필터를 사용하는 순수한 CSS 솔루션이 있습니다.
filter: grayscale(100%) brightness(110%);
그레이 스케일 필터는 노란색을 회색으로 대체 한 다음 밝기가 회색을 제거합니다.
나는 포기한다!
자동 완성으로 입력 색상을 변경할 수있는 방법이 없기 때문에 웹킷 브라우저 용 jQuery를 사용하여 모든 입력을 비활성화하기로 결정했습니다. 이렇게 :
if (/webkit/.test(navigator.userAgent.toLowerCase())) {
$('[autocomplete="on"]').each(function() {
$(this).attr('autocomplete', 'off');
});
}
Google 크롬에서 자동 완성을 방지하려는 경우 해결책이 있지만 약간 "machete", 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();
}
다시 한 번 죄송합니다. 댓글로하고 싶습니다.
원한다면 내가 사용한 사이트에 대한 링크를 넣을 수 있습니다.
이것은 입력, 텍스트 영역 및 정상, 호버, 초점 및 활성 상태에서 선택에 대해 작동합니다.
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;
}
Here is SCSS version of the above solution for those who are working with SASS/SCSS.
input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill
{
&, &:hover, &:focus, &:active
{
-webkit-box-shadow: 0 0 0px 1000px white inset !important;
}
}
Thanks Benjamin!
The Mootools solution is a little more tricky, as I can't get fields by using $('input:-webkit-autofill'), So what I've used is the following:
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
}
None of the solutions worked for me, the inset shadow won't work for me because the inputs have a translucent background overlaid over the page background.
So I asked myself, "How does Chrome determine what should be autofilled on a given page?"
"Does it look for input ids, input names? Form ids? Form action?"
Through my experimentation with the username and the password inputs, there were only two ways I found that would cause Chrome to not be able to find the fields that should be autofilled:
1) Put the password input ahead of the text input. 2) Give them the same name and id ... or no name and id at all.
After the page loads, with javascript you can either dynamically change the order of the inputs on the page, or dynamically give them their name and id ...
And Chrome doesn't know what hit it ... autocomplete is broken!
Crazy hack, I know. But it's working for me.
Chrome 34.0.1847.116, OSX 10.7.5
Unfortunately strictly none of the above solutions worked for me in 2016 (a couple years after the question)
So here's the aggressive solution I use:
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)">
Basically, it deletes the tag while saving the value, and recreates it, then puts back the value.
As mentioned before, inset -webkit-box-shadow for me works best.
/* Code witch overwrites input background-color */
input:-webkit-autofill {
-webkit-box-shadow: 0 0 0px 1000px #fbfbfb inset;
}
Also code snippet to change text color:
input:-webkit-autofill:first-line {
color: #797979;
}
This worked for me:
padding: 5px;
background-clip: content-box;
This works for me.
.input:-webkit-autofill {transition: background-color 5000s ease-in-out 0s;}
and this worked for me (Chrome 76 tested)
input:-internal-autofill-selected {
background-color: transparent;
}
This is complex solution for this task.
(function($){
if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0) {
$('input, select').on('change focus', function (e) {
setTimeout(function () {
$.each(
document.querySelectorAll('*:-webkit-autofill'),
function () {
var clone = $(this).clone(true, true);
$(this).after(clone).remove();
updateActions();
})
}, 300)
}).change();
}
var updateActions = function(){};// method for update input actions
updateActions(); // start on load and on rebuild
})(jQuery)*:-webkit-autofill,
*:-webkit-autofill:hover,
*:-webkit-autofill:focus,
*:-webkit-autofill:active {
/* use animation hack, if you have hard styled input */
transition: all 5000s ease-in-out 0s;
transition-property: background-color, color;
/* if input has one color, and didn't have bg-image use shadow */
-webkit-box-shadow: 0 0 0 1000px #fff inset;
/* text color */
-webkit-text-fill-color: #fff;
/* font weigth */
font-weight: 300!important;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="name" autocomplete="name"/>
<input type="email" name="email" autocomplete="email"/>참고URL : https://stackoverflow.com/questions/2781549/removing-input-background-colour-for-chrome-autocomplete
'program story' 카테고리의 다른 글
| 폴더 자체가 아닌 폴더의 모든 파일 / 폴더를 .gitignore하는 방법은 무엇입니까? (0) | 2020.10.03 |
|---|---|
| JavaScript 창 크기 조정 이벤트 (0) | 2020.10.03 |
| Xcode 6 버그 : Interface Builder 파일의 알 수없는 클래스 (0) | 2020.10.03 |
| Android에서 배경을 20 % 투명하게 만드는 방법 (0) | 2020.10.03 |
| JavaScript는 단일 스레드가 보장됩니까? (0) | 2020.10.03 |