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;

但是在自动填充中，我得到默认外观，黄色背景......但如果我查看用户代理样式，那么background-image：none;被我的形象覆盖。 我试着设置背景：透明;对于选择，但没有任何影响。

Answer 1

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

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

这是jsfiddle

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

这是另一个可能有用的线程： Removing input background colour for Chrome autocomplete?