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

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

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

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

当前回答

更新2022

2022年更新后工作:

input:-webkit-autofill,
input:-webkit-autofill:focus {
    transition: background-color 600000s 0s, color 600000s 0s;
}
input[data-autocompleted] {
    background-color: transparent !important;
}

2021-09-28 15:16:08

其他回答

我放弃!

由于没有办法用自动补全来改变输入的颜色，我决定禁用所有这些webkit浏览器用jQuery。是这样的:

if (/webkit/.test(navigator.userAgent.toLowerCase())) {
    $('[autocomplete="on"]').each(function() {
        $(this).attr('autocomplete', 'off');
    });
}

2013-10-24 12:41:04

这对我很有用。

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

2018-04-17 06:59:36

input:-webkit-autofill {
    border: none;
    border-radius: .3rem;
    caret-color: #fff; /* Pour le I quand on édite */
    color: #fff;
    background: #292a2d;
    /* webkit autofill */
    -webkit-text-fill-color: #fff; /* Surcharge la font color d'autofill */
    -webkit-background-clip: text; /* Supprime le background autofill, utile pour le border radius */
    box-shadow: 0 0 0 50px #292a2d inset; /* Ajoute un fake background à base d'ombrage aplatit */
}

2021-01-30 05:30:36

谷歌Chrome用户代理阻止开发者的CSS，所以改变自动填充UI必须使用另一个属性，像这样:

input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px #d500ff inset !important;
    /*use inset box-shadow to cover background-color*/
    -webkit-text-fill-color: #ffa400 !important;
    /*use text fill color to cover font color*/
}

2017-10-19 11:48:09

一个可能的解决方法是设置一个“强”内阴影:

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

2012-12-13 12:27:08

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

推荐文章

最新文章

标签