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

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

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


当前回答

要有一个透明的背景,同时不使用时间延迟(特别是在现代web应用程序中,人们可以停止使用它一段时间,并希望界面的行为是可预测的),使用这个:

input:-webkit-autofill { 
    -webkit-background-clip: text;
}

身体{ 背景:lightblue; } 输入{ 背景:透明; } 输入。no-autofill-bkg: -webkit-autofill { -webkit-background-clip:文本; } <input type="text" name="email" /> <input type="text" name="email" class="no-autofill-bkg" />

工作环境:Chrome 83 / 84.0.4147.89, Edge 84.0.522.44

如果你决定重新发布我的解决方案,我只要求你包括我的名字或链接到这个。

其他回答

对于使用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);
            }
        }
    }
}

我们有一个场景,其中我们有一个复选框来启用或禁用输入字段。

如果选中复选框,字段将被禁用。一旦复选框未选中,输入字段将被启用。我们可以使用chrome自动填充来填充这些字段,如地址和所有。

在点击返回的复选框后自动填充输入字段被禁用,但Chrome添加的背景字段填充自动填充在我的情况下,这些是城市,州和zip字段

在我不得不做的禁用输入字段中保持透明度

input:disabled:-webkit-autofill,
input:disabled:-webkit-autofill:hover, 
input:disabled:-webkit-autofill:focus, 
input:disabled:-webkit-autofill:active  {
    transition: background-color 5000s;
    -webkit-text-fill-color: #fff !important;
    -webkit-background-clip: text;
    color: white !important;
}

这可能有点晚了,但对于未来的参考,有一个CSS唯一的解决方案,Olly Hodgons在这里展示 http://lostmonocle.com/post/1479126030/fixing-the-chrome-autocomplete-background-colour

您所要做的就是添加一个进一步的选择器来覆盖默认的输入字段设置 所以用而不是

input:-webkit-autofill {
    background-color: #FAFFBD !important;
}

#login input:-webkit-autofill {
    background-color: #ff00ff;
}

or

form input:-webkit-autofill {
    background-color: #f0f;
}

这对我来说似乎很管用。

这对我来说是有效的(Chrome 76测试)

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

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

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