在我正在处理的一个表单上,Chrome会自动填写电子邮件和密码字段。这是好的,但是,Chrome改变背景颜色为淡黄色。

我正在做的设计是在深色背景上使用浅色文本,所以这真的会破坏表单的外观——我有鲜明的黄色框和几乎看不见的白色文本。一旦聚焦了场,场就会恢复正常。

有可能阻止Chrome改变这些字段的颜色吗?


当前回答

添加一个小时的延迟将暂停输入元素上的任何css更改。 这比添加过渡动画或内阴影更好。

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

其他回答

使用这个检查你的问题是否解决了

<input type="email" id="email" name="email" class="form-control validate" onfocus="this.removeAttribute('readonly');" readonly> 

如前所述,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;
}

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{过渡:background-color 5000 0s ease-in-out 0;}

我开发了另一个解决方案使用JavaScript没有JQuery。如果你觉得这有用或决定重新发布我的解决方案,我只要求你包括我的名字。享受。——丹尼尔·费尔韦瑟

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

This code is based on the fact that Google Chrome removes the Webkit style as soon as additional text is entered. Simply changing the input field value does not suffice, Chrome wants an event. By focusing on each input field (text, password), we can send a keyboard event (the letter 'a') and then set the text value to it's previous state (the auto-filled text). Keep in mind that this code will run in every browser and will check every input field within the webpage, adjust it accordingly to your needs.