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

yk9xbfzb  于 12个月前  发布在  其他
关注(0)|答案(5)|浏览(213)

我想设置背景颜色透明到我的输入时,浏览器自动完成我的形式,目前看起来像图像添加,有人知道如何实现这一点?
我已经尝试过了,但它设置为白色和边框的风格与黄色默认,我想为文字的颜色也是白色。

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

字符串
它看起来是这样的:


的数据
提前感谢:)

cgh8pdjw

cgh8pdjw1#

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

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

字符串

m0rkklqb

m0rkklqb2#

用这个来保存你的时间

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

字符串

1tuwyuhd

1tuwyuhd3#

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

字符串
只要用你的颜色替换透明

s71maibg

s71maibg4#

经过几个小时的搜索,这里有一个最好的代码,它可以使用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;
    }
}

字符串
完善好

f45qwnt8

f45qwnt85#

得到了答案的家伙..:)

input,
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 50px rgba(255, 255, 255, 0) inset !important;
  background-color: transparent !important;
  background-clip: text;
}

字符串

相关问题