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;

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

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?