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

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

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

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

当前回答

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

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

2019-08-30 00:39:16

其他回答

这将适用于正常、悬停、聚焦和激活状态下的输入、文本区和选择。

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 0 1000px white inset !important;
}

下面是上述解决方案的SCSS版本，供使用SASS/SCSS的人使用。

input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
    &, &:hover, &:focus, &:active{
        -webkit-box-shadow: 0 0 0px 1000px white inset !important;
    }
}

2018-02-08 17:54:48

很简单，只要加上，

    autocomplete="new-password"

到密码字段。

2016-10-16 19:51:58

这招对我很管用:

padding: 5px;
background-clip: content-box;

2017-12-30 20:52:56

我放弃!

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

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

2013-10-24 12:41:04

SASS

input:-webkit-autofill

  &,
  &:hover,
  &:focus,
  &:active
    transition-delay: 9999s
    transition-property: background-color, color

2015-10-23 21:43:30

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

推荐文章

最新文章

标签