Question

我正在使用一些登录/重置密码/确认密码表单，我需要自动填充不要删除输入字段上的背景图像。我使用这段代码使背景透明，但有没有办法保存当前图像？

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
transition: background-color 5000s ease-in-out 0s;
-webkit-text-fill-color: #fff !important;
}

我的输入字段：

input {
 width: 425px;
 height: 40px;
 margin-bottom: 30px;
 line-height: 40px;
 border: 0;
 border-bottom: 1px solid #393939;
 outline: none;
 color: #fff;

 &.ng-invalid.ng-dirty.ng-touched,
 &.ng-invalid.ng-touched{
 border-bottom: 1px solid red;
 }
 &.password{
 background: url('../../assets/img/password.png') no-repeat;
 }
 &.email{
 background: url('../../assets/img/mail.png') no-repeat;
 }
}

提前致谢。

Answer 1

在网上研究后，没有找到一个透明的解决方案，我自己进行了尝试，并使用了动画（向前）达到了预期的效果，并且可以正常工作。前向动画比重要属性或本机属性具有更多的权重，因此我们可以强制背景透明。（您也可以使用 -webkit-text-fill-color 更改文本颜色）

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active  {
    /* -webkit-text-fill-color: black; */ /* You can change text color here */
    animation: input_background_autofill 0s forwards;
}
@keyframes input_background_autofill {
    100% { background-color: transparent }
}

然后，在您的情况下，只需将输入字段包装到另一个包含背景图像的div中，考虑到它现在是透明的，您将在自动填充的输入后面看到该图像。

希望会有所帮助。

Answer 2

由于缺乏声誉我无法发表评论，我发了一个答案：

我认为应该有效：（您不需要使用background-color来更改黄色背景。您可以使用box-shadow）

input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px #fff inset;
    -moz-box-shadow: 0 0 0 100px #fff inset;
    box-shadow: 0 0 0 100px #fff inset;
    /* change the white to any color */
}

要更改文字颜色，请使用：

-webkit-text-fill-color: green !important;

或者，如果您根本不想要自动填充，可以在HTML中设置：

<form autocomplete="off">...</form>

Chrome自动填充功能删除了输入背景

2 个答案: