在移动浏览器中使用自动填充功能将背景图像添加到输入字段中-默认黄色背景将其删除 [英] 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?

(请不要建议从字段中删除自动填充...显然可以解决此问题，但会占用Web应用程序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屋！