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

Question

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

来自开发工具的 styles 的屏幕截图

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

Answer 1

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

您可以使用-webkit-autofill伪选择器来定位这些字段并根据您的需要设置样式。 默认样式只影响背景颜色，但大多数其他属性适用于此，例如 border 和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;
}

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