html - 在移动浏览器中使用自动填充功能将背景图像添加到输入字段 - 默认黄色背景会删除它们

Question

众所周知，现代浏览器会在访问者使用自动填充功能为其填写字段的文本字段中添加丑陋的黄色背景。

我们大多数人还知道覆盖文本颜色和背景颜色的便捷技巧。您甚至可以添加仍然出现在大多数现代桌面浏览器中的背景图片:

input:-webkit-autofill {
    -webkit-text-fill-color: #000000 !important;
    -webkit-box-shadow: 0 0 0px 1000px #ffffff inset;
    background-image: url('image.jpg');
}

但在移动浏览器(例如 iOS 上的 Mobile Safari、Android 上的 Chrome)中，无论您使用此代码还是保留默认的黄色背景色，图像都会消失。

有谁知道即使在使用自动填充时也能强制输入字段继续显示背景图像的方法？

(请不要建议从该字段中删除自动填充...显然可以解决此问题，但会从我的 Web 应用程序的用户体验中删除功能。)

Answer 1

我遇到了同样的问题并通过将 !important 放在我的 CSS 中解决了它。现在图像背景也显示在移动设备上。

input:-webkit-autofill {
    -webkit-text-fill-color: #000000 !important;
    -webkit-box-shadow: 0 0 0px 1000px #ffffff inset;
    background-image: url('image.jpg') !important;
}