Add background image to input fields with Autofill in mobile browsers - default yellow background removes them

Question

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');
}

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?

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

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;
}