在移动浏览器中使用自动填充将背景图像添加到输入字段 - 默认黄色背景将其删除答案

【问题标题】：Add background image to input fields with Autofill in mobile browsers - default yellow background removes them在移动浏览器中使用自动填充将背景图像添加到输入字段 - 默认黄色背景将其删除
【发布时间】：2015-11-27 06:55:28
【问题描述】：

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

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

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 应用程序的 UX 中删除功能。）

【问题讨论】：

标签： html css mobile webkit autofill

【解决方案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;
}

【讨论】：