在Chrome自动完成时去除输入框背景颜色？

Question

我正在处理的一个表单中，Chrome自动填充了电子邮件和密码字段。这没问题，但是Chrome将背景颜色更改为淡黄色，这在我的设计中使用浅色文本和深色背景的表单中会显得非常不协调——我有鲜艳的黄色方框和几乎看不见的白色文本。一旦字段获得焦点，则字段恢复正常。

有没有可能阻止Chrome更改这些字段的颜色？

- DisgruntledGoat

Answer 1

你可以更改输入框的样式以及输入框内文本的样式：

在这里，你可以使用任何颜色，例如白色、#DDD、rgba(102, 163, 177, 0.45)。

但是透明色在这里不起作用。

/* Change the white to any color */
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active{
    -webkit-box-shadow: 0 0 0 30px white inset !important;
}

此外，您还可以使用这个来改变文字颜色：

/*Change text in autofill textbox*/
input:-webkit-autofill{
    -webkit-text-fill-color: yellow !important;
}

建议：不要使用数百或数千的过度模糊半径。这没有任何好处，可能会给较弱的移动设备增加处理器负载。（对于实际的外部阴影也是如此）。对于一个正常的高度为20px的输入框，30px的“模糊半径”将完全覆盖它。

2023年编辑：
为了同时具有透明度和能够更改背景颜色：

input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active{
    -webkit-background-clip: text;
    -webkit-text-fill-color: #ffffff;
    transition: background-color 5000s ease-in-out 0s;
    box-shadow: inset 0 0 20px 20px #23232329;
}

请注意，在最近的Chrome浏览器中，这里的过渡效果无效，它仅为旧版本Chrome的备用解决方案。

- Fareed Alnamrouti

---

现在在Chrome中，用户代理样式表显示:-internal-autofill-previewed和:-internal-autofill-selected伪类，而不是-webkit-autofill。然而，神奇的是，-webkit-autofill仍然有效。我个人没有需要使用!important。 - Andy

谢谢，它适用于最新版本的Chrome 86，不需要使用!important。 - Patronaut

如果使用半透明背景并想要完全删除阴影，则使用-webkit-box-shadow: none。 - beano

:active 是基本解决方案。非常感谢。 - Sandro Santos

只是想提一下，文本的解决方案有效，但是管道颜色仍然不变，除非您也声明 caret-color: yellow。 - Cyman

Answer 2

我有一个更好的解决方案。

像下面这样将背景设置为另一种颜色并不能解决我的问题，因为我需要一个透明的输入框。

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

- Nathan White

---

太棒了，我还需要一个透明的背景。PS：不要忘记 -webkit-text-fill-color: yellow !important; 来设置文本颜色。 - gfpacheco

与其将 transition-duration 设置得非常高，倒不如设置 transition-delay。这样做可以更进一步减少颜色变化的可能性。 - Shaggy

很好的解决方案……但为什么有效？设置 background-color 为什么不起作用？Chrome需要修复这个问题！！ - TetraDev

这个对我起作用，而另一个则不行... 适合白色背景。 - Jona

使用input:-webkit-autofill { transition: all 0s 50000s; }来延迟所有样式更改。 - RienNeVaPlu͢s

Answer 3

以前添加盒阴影的解决方案适用于需要纯色背景的人。另一种添加过渡效果的解决方案虽然可行，但必须设置持续时间/延迟，在某些情况下可能会再次显示。

我的解决方案是改用关键帧，这样它将始终显示您选择的颜色。

@-webkit-keyframes autofill {
    0%,100% {
        color: #666;
        background: transparent;
    }
}

input:-webkit-autofill {
    -webkit-animation-delay: 1s; /* Safari support - any positive time runs instantly */
    -webkit-animation-name: autofill;
    -webkit-animation-fill-mode: both;
}

示例 Codepen：https://codepen.io/-Steve-/pen/dwgxPB

- Steve

---

我认为这个答案比被接受的答案更好……box-shadow方法很巧妙也确实可行，但当用户选择一个值以进行自动填充时，输入字段会短暂地闪现默认颜色，如果您的输入框具有深色背景，则可能会有问题。这个解决方案没有这样的问题。干杯！ - skwidbreth

特别是针对Vuetify 2，如果您将color: inherit设置为该值，则此方法适用。 - Marc

以前这对我起作用，但在最新版的Chrome（88）中不行了。有什么想法吗？是否有更新的解决方案？ - sanjuro

Answer 4

要在不使用时间延迟的情况下拥有透明背景（尤其是在现代网络应用程序中，人们可能会停止使用一段时间并希望界面具有可预测的行为），请使用以下方法：

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

body {
  background: lightblue;
}

input {
  background: transparent;
}

input.no-autofill-bkg:-webkit-autofill {
  -webkit-background-clip: text;
}

<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

- manuel-84

---

@KABA 当然，它会覆盖 Webkit 上的 background-clip 属性，但它仍然是 CSS 代码，因此每个人都必须研究其对代码库的影响。 - manuel-84

这是一个不错的解决方案，有时候添加 !important 是必要的。 - Nadav

要改变颜色，请添加“-webkit-text-fill-color: white !important;”。 - Black

对我来说完美无缺~~2023年7月 - Redemption Okoro

简单而且对我有效。 - undefined

Answer 5

2023年更新

最新更新后的工作内容：

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

- Hannes Schneidermayer

---

如果您无法使其正常工作，请确保您没有设置另一个转换来覆盖输入上的此转换。 - Brian Poole

这个有关浏览器支持的情况怎样？ - AzizStark

安全使用 @AzizStark https://caniuse.com/css-transitions - Hannes Schneidermayer

Answer 6

这是我的解决方案，我使用了过渡和过渡延迟，因此可以在我的输入字段上具有透明的背景。

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-transition: "color 9999s ease-out, background-color 9999s ease-out";
    -webkit-transition-delay: 9999s;
}

- Gísli Freyr Svavarsson

---

我已将一张图片设为输入框的背景，这个解决方案消��了黄色阴影，但是背景图片仍然被隐藏。 - Matteo Tassinari

目前最佳解决方案，可与现有的 box-shadow 一起很好地用于验证。 - Yoann

Chrome提示"color 9999s ease-out, background-color 9999s ease-out"不是有效的表达式。我使用了以下代码：-webkit-transition: background-color 9999s ease-out;和-webkit-text-fill-color: #fff !important;。 - naanace

@Yoann，你的现有box-shadow验证是如何工作的？在我的情况下，由于这个CSS规则，我的自定义红色阴影（表示输入错误）会延迟显示，使用户认为最近的输入无效，而实际上它是正确的。 - Paul Razvan Berg

Answer 7

这是设计时的预期行为，因为这种着色行为来自于WebKit。它使用户能够了解数据已经被预先填充。Bug 1334

您可以通过执行以下操作来关闭自动完成（或在特定表单控件上进行设置：

<form autocomplete="off">
...
</form

或者您可以通过以下方式更改自动填充的颜色：

input:-webkit-autofill {
    color: #2a2a2a !important;
}

请注意，有一个正在被跟踪的错误以便使其再次工作: http://code.google.com/p/chromium/issues/detail?id=46543

这是一个 WebKit 的行为。

- Mohamed Mansour

---

谢谢，但那个 Webkit CSS 规则不起作用。无论如何都会被用户代理样式表所覆盖背景颜色，即使将其设置为 !important 并以 ID 为目标提高特异性也是如此。看起来 Chrome 总是会覆盖它。删除自动完成似乎可以解决问题，但这真的不是我想要做的。 - DisgruntledGoat

Chrome会阻止任何尝试覆盖黄色颜色的CSS。设置autocomplete="off"肯定会引起无障碍问题。不过，为什么这个答案还被标记为正确呢？ - João

@JoãoRamos 这是一个Chrome的bug，http://code.google.com/p/chromium/issues/detail?id=46543 - Mohamed Mansour

这是一个不错的解决方案，但如果你正在使用React，它会抱怨自动完成是未知的DOM属性。因此，实际上应该是autoComplete（注意驼峰式）。 - Tim Scollick

关闭自动补全只是一种方法，而不是解决方案。 - Paullo

Answer 8

目前的一个可能解决方法是在内部设置“strong”阴影:

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

- Tamás Pap

---

这个解决方案实际上是有效的，我们不想只有在某些情况下跳过黄色背景，因为这会导致接受的答案失效。 - davidkonrad

Answer 9

尝试使用此方法隐藏自动填充样式

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:active,
input:-webkit-autofill:focus {
    background-color: #FFFFFF !important;
    color: #555 !important;
    -webkit-box-shadow: 0 0 0 1000px white inset !important;
    -webkit-text-fill-color: #555555 !important;
}

- Francisco Costa

---

对于好奇的人来说，background-color没有任何效果。-webkit-box-shadow是聪明的部分，在Chrome中覆盖了黄色背景。 - Geuis

Answer 10

搜索了2个小时，似乎谷歌仍然会以某种方式覆盖黄色，但我找到了解决方法。没错，这也适用于悬停，聚焦等操作。你所需要做的就是在样式属性值后添加!important。

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

这将完全从输入字段中移除黄色

- don