在移动浏览器中使用自动填充将背景图像添加到输入字段 - 默认黄色背景将其删除 [英] Add background image to input fields with Autofill in mobile browsers - default yellow background removes them

问题描述

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

As we all know, modern browsers add an ugly yellow background to text fields in which the visitor has used Autofill to fill in the fields for them.

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

Most of us also know the handy trick to override text color and background color. You can even add a background image which still appears in most modern desktop browsers:

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)，无论您使用此代码还是保留默认的黄色背景色，图像都会消失.

But in mobile browsers (e.g. Mobile Safari on iOS, Chrome on Android), whether you use this code or leave the default yellow background color, the image disappears.

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

Does anyone know a way to force the input field to continue to show the background image even when using Autofill?

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

(Please don't suggest removing Autofill from the field...obviously that fixes this but takes away functionality from the UX of my web application.)

推荐答案

我遇到了同样的问题，只需将 !important 放在我的 css 中就解决了.现在图像背景也会显示在移动设备上.

I'm had the same problem and solved it by just putting !important in my css. Now image background also show up on mobile device.

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

这篇关于在移动浏览器中使用自动填充将背景图像添加到输入字段 - 默认黄色背景将其删除的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！