在 WebKit 浏览器中更改自动填充样式

我们从 Lydia Dugger 通过电子邮件获得了一个很好的技巧，介绍了更改 WebKit 浏览器对已自动填充的表单字段应用的样式的方法。

我们所说的自动填充是什么

许多浏览器（包括 Chrome 和 Safari）提供了一种设置，允许用户自动填写常见表单字段的详细信息。当您填写要求填写姓名、地址和电子邮件等信息的表单时，您已经看到了这一点。

问题是，用户必须启用此设置，才能使此代码片段生效。如果启用此设置，那么 WebKit 浏览器将为用户自动填充的字段设置样式，如下所示

请注意自动填充的字段是否有黄色背景？这就是我们要谈论的，并且我们将使用此代码片段进行更改。

代码片段

我们可以使用 -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;
}

演示

查看 CodePen 上 CSS-Tricks (@css-tricks) 的笔在 WebKit 中更改自动填充样式。

Jon Kantner

# 2016 年 4 月 21 日

我怎样才能让自动填充生效？我尝试提交表单，但没有任何反应。

Geoff Graham

评论的永久链接# 2016 年 4 月 21 日

这是一个浏览器设置。它非常古怪。例如，如果您以前在字段中取消了自动填充建议，那么它将不再提供这些建议——至少，目前就是这样。

Jon Kantner

# 2016 年 4 月 21 日

我现在明白了。在我的 Chrome 设置中，我只需要选中“启用自动填充以单次点击填写网页表单”并在我“管理自动填充设置”中添加一个街道地址。太酷了！

ElijahFowler

# 2016 年 4 月 25 日

我只能说这太棒了！

此外，CSS 中第 4 行结尾处缺少一个逗号，示例中第 5 行多了一个 input:-webkit-autofill 声明。

或者，您实际上不必分别指定 select、input、textarea。

您可以这样做

:-webkit-autofill,
:-webkit-autofill:hover, 
:-webkit-autofill:focus {}

我肯定会在我的项目中使用它！

Nick

# 2016 年 6 月 23 日

有没有办法也设置下拉菜单的样式？如果能给它添加一些样式会很酷。我还遇到了一个问题，它与一个模态框重叠了，我想调整下拉部分的 Z 轴索引。

Joseph Izatt (@JosephIzatt)

评论的永久链接# 2018 年 11 月 9 日

我认为不行，因为菜单是由浏览器处理的。

Marius

# 2016 年 10 月 18 日

谢谢！我整天都在为这个问题苦恼。

timsilva

# 2016 年 11 月 9 日

非常感谢！这个问题困扰了我将近两年了。

通过将 :-webkit-autofill 样式与默认状态匹配，我能够使两种状态看起来完全相同。这对我来说至关重要，因为默认的黄色在我的深色主题网站上看起来很糟糕。

干杯 :)

Vincent Rapide

# 2016 年 12 月 11 日

我需要那种糟糕的黄色（或琥珀色）背景来阅读报纸，因为默认的纯白色背景会灼伤我的视网膜。多年前，OS/2 的原生浏览器提供了易于使用的页面背景选择。这里需要一些提示。

Anthony Lalala

# 2017 年 4 月 13 日

你好！

我也用这种方法解决了这个问题——谢谢。但我仍然在游标方面遇到了问题——实际上，您可以在页面上的演示中看到它——即使您设置了与自动填充不同的样式——在使用它之后，您的游标会变成黑色，而它应该变成绿色，但它是黑色的——http://joxi.ru/Vrwn36QH96NGAX

有人知道如何解决这个问题吗？

Emiliano Gonzalez

# 2017 年 10 月 4 日

嗯，这对我来说不起作用。
有什么想法吗？我在使用 Chrome 61

Franco Basaglia

评论的永久链接# 2017 年 12 月 18 日

我在使用 Chrome 63，也不起作用。我对此进行了研究，Mozilla 的开发人员网站上说，这是一个非标准功能，并且“实现之间也可能存在很大的不兼容性，并且行为在将来可能会发生变化”。我想行为在 Chrome 的新版本中发生了变化
Geoff Graham

评论的永久链接# 2017 年 12 月 18 日

是的，Chrome 自创建此代码片段以来已经更新。它仍然可以在 Safari 11 中使用。

Gideon Apollo Bardelas

# 2017 年 10 月 9 日

好的，这很棒，但是输入字段下方出现的建议列表呢？我们还可以自定义它在 WebKit 中的外观吗？我想自定义它，使其像使用 CSS 框架的项目的一部分一样无缝。

Jonz (@Jon47)

# 2018 年 2 月 21 日

值得一提的是，颜色和背景颜色无法覆盖——因此出现了 -webkit-text-fill-color 和 box-shadow 技巧。我推测，在用户代理默认值中为该选择器指定的任何值（目前还包括背景图像）都无法覆盖。

Tiago Coelho

评论的永久链接# 2018 年 2 月 28 日
实际上，我找到了使用关键帧覆盖它的解决方案
```
@-webkit-keyframes autofill {
    to {
        color: #666;
        background: transparent;
    }
}

input:-webkit-autofill {
    -webkit-animation-name: autofill;
    -webkit-animation-fill-mode: both;
}
```
https://stackoverflow.com/questions/2781549/removing-input-background-colour-for-chrome-autocomplete
Azragh

评论的永久链接# 2018 年 3 月 12 日

@Tiago Coelho: 效果非常好——你真棒！=D

Tamas

# 2018 年 6 月 14 日

@Tiago Coelho: 谢谢，它可以工作！

Chris Coyier

# 2018 年 6 月 25 日

Romain Mascia 提出了一个方法

在不使用 box-shadow 的情况下，使自动填充黄色背景颜色失效（它也可以与 box-shadow 结合使用！）。

https://codepen.io/romulusmaxia/pen/aKKbPm

starp

# 2018 年 8 月 31 日

我可以看到“transition”可以完美地工作，即使没有“box-shadow”，也可以禁用 Chrome 自动填充样式的黄色背景，但我并不真正理解它是怎么工作的/为什么，有人可以解释一下吗？

Mike Wax

# 2018 年 12 月 27 日

有人知道如何通过 HTML 完全禁用自动填充弹出窗口吗？

Cuir Pork

# 2019 年 2 月 7 日

你的示例如果滚动，会让自动填充字段停留在屏幕上，看起来不太好。Chrome 做的这个自动填充功能简直是**最糟糕**的。我简直不敢相信你无法禁用它。我已经尝试了所有方法，包括在任何聚焦的空白字段中以编程方式添加一个零宽度非打印字符。但然后，Chrome 弹出一个空白窗口（覆盖了我的标签）Chrome 真的需要解决这个问题。真是乱七八糟。

感谢你的帮助。

Victor Stadnichenko

# 2019 年 7 月 5 日

在 Chrome、FF 和 Midori 中效果很好！我们是否需要关心 - 或者添加一些行 - 用于其他浏览器？

Daovanphuoc

# 2019 年 8 月 2 日

谢谢！不错的代码

Ramesh

# 2019 年 9 月 9 日

为什么要将 spread 设置为 1000px？ -webkit-box-shadow: 0 0 0px 1000px #000 inset;

Geoff Graham

评论永久链接# 2019 年 9 月 9 日

自本文发布以来，WebKit 中的自动填充样式已更改。如果我没记错的话，这是抵消其默认样式的一种方法。

Jurrian Lammerts

# 2020 年 1 月 6 日

我来到这里是因为我想避免用户选择自动填充选项后字体大小发生跳跃。但是，它似乎没有任何效果，你有没有通过更改 WebKit 样式来实现这一点？

Quozzo

评论永久链接# 2020 年 9 月 4 日

我遇到了类似的问题。将鼠标悬停在演示中的选择上会将其显示为输入中的小文本，然后选择该选项会导致文本变得更大。
wotan

评论永久链接# 2021 年 12 月 22 日
有人找到解决方法了吗？
我尝试了动画解决方法，但无法使其正常工作。
```
@-webkit-keyframes autofill {
  to {
    font-size: 24px;
  }
}

input:-webkit-autofill {
  animation-name: autofill;
  animation-fill-mode: both;
}
```
我还尝试了来自“wojtekmaj”的建议（见下文），但它也不起作用。

Adam Ritchie

# 2020 年 3 月 9 日

谢谢，这篇文章非常有用！不过我有一个建议：当自动填充样式处于活动状态时，如果自动填充字段的背景颜色很深，手动设置caret-color=#ffffff（或任何所需的对比色）非常有用。

Javier

# 2020 年 6 月 25 日

现在，随着最新的 Chrome 更新，它已经过时了。

Bobê Campos

# 2020 年 10 月 14 日

我刚尝试以更简洁的方式重写这个结果。顺便说一下，这在我的浏览器中仍然有效。

input, textarea, select {
    &:-webkit-autofill {
        &, &:hover, &:focus {
            // border: 1px solid $main;
            -webkit-text-fill-color: $main;
            -webkit-box-shadow: 0 0 0px 1000px #fff inset;
            box-shadow: 0 0 0px 1000px #fff inset;
            transition: background-color 5000s ease-in-out 0s;
        }
    }
}

# 2020 年 12 月 1 日

transition: background-color 0s;
transition-delay: 600s;

Jean

# 2021 年 8 月 21 日

我尝试了这个，但是如何更改自动填充的font-size？

wojtekmaj

评论永久链接# 2021 年 11 月 24 日
对于 -webkit-autofill，这对我有用
```
  input:-webkit-autofill::first-line {
    font-size: 24px;
  }
```

Martin

# 2022 年 11 月 4 日

如果你尝试设置背景颜色，此代码不起作用，例如：

background-color: red

有人知道如何做到这一点吗？

Geoff Graham

评论永久链接# 2022 年 11 月 4 日

需要覆盖 WebKit 的默认-webkit-box-shadow 属性值，这就是我在自动填充上更改背景颜色的方法：-webkit-box-shadow: 0 0 0px 1000px #000 inset;

将#000值更改为另一种颜色，你应该没问题！

IamLoWLo

# 2023 年 1 月 26 日

有人在 chrome+iOS 上遇到这个问题吗？
有趣的是，它在 Safari+iOS 上运行良好。

Friday imudia Eboigbodin

# 2024 年 4 月 22 日

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 transparent !important;
-webkit-box-shadow: 0 0 0px 1000px transparent inset !important;
transition: background-color 5000s ease-in-out 0s !important;
}

Pawan kumar

评论永久链接# 2024 年 5 月 29 日

这里透明不起作用。我确信你试图使输入字段透明，这意味着它不会向输入字段添加任何颜色。

我们所说的自动填充是什么

代码片段

演示

评论

发表评论 取消回复

发表评论取消回复