防止Edge和Chrome在autoform上改变颜色

Posted 2021-04-04

我在我的网页上创建了一个嵌入式支付解决方案。在我付款并输入我的姓名，地址等之后，Edge和Chrome（以及可能还有其他人）建议我保存我的信息。没问题。当我进行新的付款时，浏览器会建议一些保存的表单数据。我也好。但是当我点击保存的信息时，我填写的元素（名称，地址）的颜色会发生变化。在使用表单数据之前，背景是透明的，而文本是＃D8D8D8，使用表单数据后，背景颜色变为＃E5F1FB，文本颜色几乎为黑色。我希望背景变得透明（或保持透明）

如何防止浏览器在使用保存的表单数据时更改颜色？不知道这是否可行，如果可能，如果这应该通过javascript（jQuery）或CSS或其他方式完成。

到目前为止，我尝试使用CSS：

.subscription_payment:-webkit-autofill,  
.subscription_payment:-webkit-autofill:hover,  
.subscription_payment:-webkit-autofill:focus,  
.subscription_payment:-webkit-autofill:active  
 {  
 -webkit-transition: "color 9999s ease-out, background-color 9999s ease-out";  
 -webkit-transition-delay: 9999s;  
 transition: color 9999s ease-in-out, background-color 9999s ease-in-out;  
 transition-delay: 9999s;  
 -webkit-box-shadow: 0 0 0 30px red inset !important;  
 -webkit-text-fill-color: blue !important;  
 -webkit-background-fill-color: yellow !important;  
 -webkit-box-shadow: 0 0 0px 1000px white inset !important;  
}

我试过Edge和Chrome。 TEXT COLOR在Chrome中更改，而不是在Edge中。背景颜色不会改变

阿尔伯特

答案

如果它是你所说的自动填充，我通常会使用这一小段CSS来禁用背景颜色。

.subscription_payment:-webkit-autofill,  
.subscription_payment:-webkit-autofill:hover,  
.subscription_payment:-webkit-autofill:focus,  
.subscription_payment:-webkit-autofill:active  
 {
   -webkit-transition: "color 9999s ease-out, background-color 9999s ease-out";
   -webkit-transition-delay: 9999s;
   transition: color 9999s ease-out, background-color 9999s ease-out;
   transition-delay: 9999s;
}

希望这对你有所帮助。

另一答案

答案很简单，我从来没有想过：不要使用form-tags :)

AutoFORM仅作用于表单html标记，但是要将信息发送到后端，您不需要表单。一旦我从HTML表单中删除了要求输入“name”，“Company”，“address 1”，“address 2”，“zip code”，“city”，“county”和“country”的输入，所以只有信用卡信息在表格中，问题就消失了:)

阿尔伯特