Kreven的解决方案虽然不是最优雅的代码行，但我认为对大多数人来说肯定能完成这项工作。然而，我想稍微修改一下，解释一下为什么它能在第一位工作。让我们来看看这行代码：

transition: background-color 2147483647s;

这是一个需要68.24年才能完成的过渡。看起来很傻，对吧？如果你想知道这个神奇的数字是从哪里来的（2147483647），这是一个整数的最大大小，因此也是CSS转换的最大持续时间。这种转变所做的是让你的浏览器的自动填充实现需要64年的时间来改变你输入的背景颜色。
同样值得注意的是，这个便宜的技巧将使您不需要使用“-webkit-box-shadow”CSS命令（当然，除非您需要自动填充背景颜色与非自动填充背景颜色不同）。
希望这对某人有帮助！干杯

我发现增加边框宽度并使其与输入背景颜色相同似乎有帮助。然后减少填充以达到相同的高度：
https://jsfiddle.net/Lguucatv/1/

border: 4px solid #202020;
padding: 1px;

还修改了盒形阴影以匹配原始设计：

box-shadow: 0 0 0 1px #000, 0 0 5px 1px #000;

有没有一种方法可以完全摆脱它们，保持该领域的原始风格？
这里是CSS

body {
  background-color: #282828;
}

.field {
    background-color: #202020;
    border: 1px solid #000;
    color: #d8d8d8;
  margin: 100px;   /* adding space around it to  */
  padding: 5px;   /* make it easier to see      */
}

input:-webkit-autofill {
    box-shadow: 0 0 0 100px #202020 inset, 0 0 5px #000;
    -webkit-text-fill-color: #d8d8d8;
}

DEMO

添加过渡到背景色与高动画时间到.field元素

.field {
  ...
  transition: background-color 5000s;
}

发现溶液here
demo on codepen

我把这个问题添加到我的CSS中：

@media (prefers-color-scheme: dark) {
  [data-theme*=dark] {
    color-scheme: dark;
  }
}

这可以帮助您避免这些恼人的边界：

.field {
  -webkit-box-shadow: inset 0 0 0 30px #2E2E2E !important;
  background-clip: content-box !important;
}