CSS 设置输入自动填充图像

Question

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

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

这是我的 select

 background-image: url(img.png);

对于 select:-webkit-autofill 我得到了相同的代码

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

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

Answer 1

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

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

这是jsfiddle

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

这是另一个可能有帮助的话题： Removing input background colour for Chrome autocomplete?

CSS 设置输入自动填充图像

CSS set input autofill image

css

autocomplete

input

autofill