移除Chrome自动完成的输入背景颜色?

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

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

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

当前回答

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

如果选中复选框，字段将被禁用。一旦复选框未选中，输入字段将被启用。我们可以使用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;
}

2021-09-02 20:31:05

其他回答

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

2015-03-14 00:31:52

我们可以使用-webkit-autofill伪选择器来定位这些字段，并按照我们认为合适的方式设置它们的样式。默认样式只影响背景颜色，但大多数其他属性都适用于此，例如border和font-size。我们甚至可以使用-webkit-text-fill-color来更改文本的颜色，下面的代码片段中包含了它。

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

2019-06-17 10:12:31

我有个更好的办法。

将背景设置为如下所示的另一种颜色并不能解决我的问题，因为我需要一个透明的输入字段

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

2015-03-30 15:44:40

这对我很有用。

.input:-webkit-autofill{过渡:background-color 5000 0s ease-in-out 0;}

2018-04-17 06:59:36

没有一个解决方案对我有效，插入阴影对我不起作用，因为输入有一个半透明的背景覆盖在页面背景上。

所以我问自己，“Chrome如何决定在给定的页面上应该自动填充什么?”

“它会查找输入id、输入名称吗?”表单的id吗?表单动作?”

通过我对用户名和密码输入的实验，我发现只有两种方法会导致Chrome无法找到应该自动填充的字段:

1)将密码输入放在文本输入之前。2)给他们相同的名字和身份证……或者根本没有名字和身份。

页面加载后，用javascript你可以动态地改变页面上输入的顺序，或者动态地给他们他们的名字和id…

Chrome不知道是什么击中了它…自动补全功能失效!

疯狂的黑客，我知道。但这对我很有用。