在自动完成表单上将输入背景更改为透明

Posted 2023-02-22

【中文标题】在自动完成表单上将输入背景更改为透明

【英文标题】：Change Input background to transparent on autocomplete form

【发布时间】：2015-06-17 07:26:38

【问题描述】：

当浏览器自动完成我的表单时，我想将背景颜色设置为对我的输入透明，目前看起来像添加的图像，有人知道如何实现吗？

我试过了，但它设置为白色，边框是默认黄色的样式，我希望文本的颜色也为白色。

input:-webkit-autofill 
    -webkit-box-shadow: 0 0 0px 1000px white inset;

看起来是这样的：

提前致谢:)

【问题讨论】：

你想要white 背景而不是transparent？

是透明的，但这是我找到的示例，所以我需要在输入中使用白色文本使其透明

-webkit-text-fill-color?和background-color?可能重复：***.com/questions/2781549/…

【参考方案1】：

最后我用这段代码得到了结果：

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;

【讨论】：

这是什么：5000s in background-color

去除背景色的过渡时间

没有缺陷。在 chrome 中测试了近 20 种解决方案后工作正常

【参考方案2】：

感谢martinezjc 的想法，但如果我们让页面打开一段时间，我们会注意到背景变化

我们可以使用 css 动画和前向填充模式消除过渡，以使背景颜色永久化

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active 
    -webkit-animation: autofill 0s forwards;
    animation: autofill 0s forwards;


@keyframes autofill 
    100% 
        background: transparent;
        color: inherit;
    


@-webkit-keyframes autofill 
    100% 
        background: transparent;
        color: inherit;
    

用你的颜色替换透明

【讨论】：

很好，我喜欢这个。为了改变颜色，我们必须经历的所有废话真是太神奇了。

这个方案比较稳定。 1. 这不会在一段时间后改变颜色 2. 如果您尝试用姓名、地址、电话等填写地址，那么这个解决方案 ROCKS（第一个解决方案只防止更改字段中的颜色变化）。

完美！谢谢。

@CaptainAdmin 请注意，此解决方案在桌面 Safari 中根本不起作用。

【参考方案3】：

使用它来节省您的时间

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active 
   -webkit-transition-delay: 9999s;
   transition-delay: 9999s;

【讨论】：

这很简单，而且效果很好！最佳解决方案 IMO。

不仅这似乎是唯一对我有用的，而且太短了！

感谢您成为这么好的人。自动填充只是......你知道的。

【参考方案4】：

经过数小时的搜索，这是适用于 jquery 和 javascript 的最佳代码，这意味着它可以根据请求使字段透明

     input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active 
    -webkit-animation: autofill 0s forwards;
    animation: autofill 0s forwards;


@keyframes autofill 
    100% 
        background: transparent;
        color: inherit;
    


@-webkit-keyframes autofill 
    100% 
        background: transparent;
        color: inherit;
    

完美的好