CSS 设置输入自动填充图像

Question

有什么方法可以在输入自动填充时设置背景图像吗？我还需要跨浏览器版本和移动版本。

我找到了一些答案，但对我来说没什么用，看 Add background image to input fields with Autofill in mobile browsers - default yellow background removes them或 Chrome hiding background image with autofills

这是我的选择

 background-image: url(img.png);

对于 select:-webkit-autofill 我有相同的代码

    background-image: url(img.png) !important;

但是在自动填充时我得到默认外观，黄色背景...但是如果我看用户代理样式，背景图像:无；被我的图像覆盖。我试图设置背景:透明；对于 select，但这没有任何作用。

Answer 1

因此，经过几个小时的工作，我找到了一个解决方法:不是将背景图像设置为输入本身，而是将其直接设置为输入上方的 div(潜水具有完全相同的宽度和高度)并为输入设置透明背景颜色。然后在自动填充发生后，将其设置为 input:-webkit-autofill:

transition: background-color 5000s ease-in-out 0s

这是jsfiddle

https://jsfiddle.net/ju3g47jh/8/

这是另一个可能有帮助的线程: Removing input background colour for Chrome autocomplete?