如何为自动填充输入覆盖浏览器 CSS？

Question

自动填充后，我的输入元素具有我想要更改的浏览器默认样式。但是，浏览器样式都使用 !important，我似乎无法覆盖它们，即使使用也使用 !important 的更具体的选择器也是如此。我认为导致问题的确切样式是这些样式：

Screenshot of styles from dev tools

有没有办法覆盖它们，使用CSS或JavaScript？我确信我以前见过带有自定义自动填充样式的输入元素。如果这很重要——尽管我希望覆盖在所有浏览器中都能正常工作——我目前正在使用在 Chromium 上运行的 Brave，所以选择器等应该与 Chrome.[=14 的工作相同=]

Answer 1

你不需要 Javascript 来解决这个问题，根据经验，你应该尽可能少地使用 JS 来操纵你的 CSS，

您可以使用 -webkit-autofill pseudo-selector 来定位这些字段并根据您的需要设置样式。默认样式只影响背景颜色，但大多数其他属性适用于此处，例如边框和 font-size。您甚至可以使用 -webkit-text-fill-colour 更改文本的颜色，它包含在下面的代码片段中。

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

** 请注意，此片段只是我手边的一个示例；您可以通过多种方式使用它！ **

如何为自动填充输入覆盖浏览器 CSS？

How can I override browser CSS for autfilled inputs?

html

javascript

css

forms